2017-08-09 67 views
1

我見過有人在「ready」函數上添加事件監聽器,而在「connectedCallback」上添加其他人。我的問題是,每個地方有什麼優點和缺點?在連接時,我們有責任將其刪除;準備好後,它會留在那裏,我不確定這是否是一個問題。聚合物2.0:事件監聽器哪裏是添加它的理想場所?

我應該這樣做:

connectedCallback() { 
    super.connectedCallback(); 
    this.addEventListener('click', this.myFunction.bind(this)); 
} 

disconnectedCallback() { 
    super.disconnetedCallback(); 
    this.removeEventListener('click', this.myFunction); 
} 

或者這樣:

ready() { 
    super.ready(); 
    this.addEventListener('click', this.myFunction.bind(this)); 
} 

回答

3

直到聚合物1.x.whatever,在元素的生命週期中ready回調,被稱爲一次

  • 元素註冊了自己的影子DOM
  • 任何<content>的派發現金紅利

,然後張貼readyattached被解僱

所以,你可能已經使用ready作爲一切後,一週時間回調確實是準備好了

隨着聚合物2.0以上,已有合同更改如何回調被解僱,並

  • ready回調不再是保證新<slots>後執行分配的含義,沒有擔保的準備本身會等內容/光DOM分佈。

  • attached現在是新的connectedCallback並且是用於元件電平DOM操作,例如設置屬性,附加的兒童等,這是一個週期的變化的槽節點分佈和元件本身被安裝在後出現這種情況基本上有用DOM層次結構,但而不是必然在繪製之後。

這樣,對於不依賴於任何::slotted內容的任何事件,請使用ready回調

用於任何需要的所有分佈式內容的知識與影子DOM一起使用connectedCallback

然而,如果可能,使用元素的回調中的超類PolymerafterNextRender方法,添加事件偵聽器

這些是我可能想到的。

所有這一切以及更多,如果有幫助,here

我還沒有讀到我們不必從一個生命週期回調,或任何這樣刪除事件偵聽器。

如果你指的是哪裏,元素本身可以連接和動態斷開/或事物的流動情況,

而且,考慮到這一點,你是在一個全球性的添加事件監聽器/你的元素的生命週期回調中的原生元素,

像安裝在window事件偵聽器的custom-elementreadyconnectedCallback內,

只有在這種情況下,確實聚合物你奉勸刪除disconnect

+0

事件聽衆現在更清楚了,我還要檢查一下關於afertNextRender –

+0

是的。我自己並沒有使用它,但必須要防止渲染塊檢查出來的乾杯! –

+0

@AdrianoSpadoni在大多數情況下,分配事件監聽器的最佳時機越早越好。我通常會去構造函數並在裏面定義我的事件監聽器。 – user544262772