Event Delegation 事件委派

JavaScript Pattern「Event Delegation 事件委派」筆記。

範例

Event Delegation(事件委派)是一種受惠於 Event Bubbling 而能減少監聽器數目的方法。

<div class="parent">
  <div class="child" data-name="a"></div>
  <div class="child" data-name="b"></div>
  <div class="child" data-name="c"></div>
  <div class="subitem" data-name="d"></div>
</div>
$('.parent').on('click', '.child', function(){
  console.log($(this).data('name'));
});

Demo / Source Code

程式碼解說

當我們 click 不同的小區塊時,就會 console 出它們個別的名字,例如:a、b 或 c。

實作方法是將 click 事件綁在 parent 上,藉由 Event Bubbling 傳遞給 child,而非直接將事件綁定在 child 上。優點是可減少監聽器的數目,缺點是由於需要判斷哪些 child node 是我們有興趣的項目,而必須多寫一些程式碼做判斷。在本例中,我們加上一個 filter「.child」,表示只對有「.child」這個 class 的節點有興趣,而沒有加上 「.child」的節點則不被影響,例如 click「.subitem」這個節點之後就不會 console 它的名字。

推薦閱讀


這篇文章的原始位置在這裡-JavaScript - Event Delegation 事件委派

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus