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 它的名字。

推薦閱讀

• Event delegation
• Bubbling and capturing