[JavaScript] - Event delegation（事件委派）

此篇概念參照網路課程pluralsight及網路資源。

event delegation

這是用來減少監聽的數目，但可以利用 bubbling 的方式來傳遞給實際想取得的元素的方式。
在 javascript 與 jQuery 中都各有方式可以使用。
利用 delegation 的概念可以針對一開始載入頁面不存在的元素，後來透過事件去動態新增的元素執行綁定事件。

 舉例來說：

$("#test [type=button]").on("click",function(){...});

// event delegation
$("#test").on("click","[type=button]",function(){...});

上面兩種方式都可以綁定到id="text"中的type="button"的元素，但透過動態新增到#test中的type="button"在原本的綁定在執行 click 時，則不會觸發 function。

網路上範例：
參考來源

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

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

<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"));
});

delegate-jQuery官方文件
jQuery參考
delegate與binding比較
Event delegation tutorial