JavaScript - 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'));   
});

完整程式碼

程式碼解說

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

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

---

推薦閱讀

• Event delegation | JavaScript Tutorial
• Bubbling and capturing | JavaScript Tutorial

---

由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-Event Delegation 事件委派。

---