目標

今天要來學習的是Event Delegation 事件委派，Event Delegation（事件委派）是一種受惠於 Event Bubbling 而能減少監聽器數目的方法
廢話不多說，就讓我們開始吧
接續localStorage

const checkBoxes = document.querySelectorAll('input');
checkBoxes.forEach(input => input.addEventListener('click', () => console.log('hi')));

完成列表渲染後，需要幫加上一個function，讓我們可以在點擊後更改它的狀態，這個時候可能會用上方範例程式碼的方法，為每一個綁上事件監聽器

但是這樣做會遇到一個問題，每當列表更新後，事件監聽器就會失效

所以，我們將事件監聽器綁定父元素上

const itemsList = document.querySelector('.plates');

function toggleDone(e) {
    // 跳過不是input的元素
    if (!e.target.matches('input')) return;
    const el = e.target;
    const index = el.dataset.index;
    items[index].done = !items[index].done;
    localStorage.setItem('items', JSON.stringify(items))
    populateList(items, itemsList);
}

itemsList.addEventListener('click', toggleDone);

每當點擊任何一個<li>的時候，其實也點擊了<ul>，因為<ul>把所有的<li>都包住了，所以不管<li>如何更動，我們都可以捕捉到點擊事件

Event Bubbling

Event Bubbling是指每當在DOM觸發一個事件，事件會觸發元素的事件處理器(event handler)，再到父元素事件處理器

Event Delegation

事件委派(Event Delegation)則是運用了Event Bubbling的一種設計模式，將事件處理器綁在目標元素的父元素上進行處理，如此可以減少事件監聽器的數量

Element.matches()

matchs() 檢查是否由提供的選擇器字串選擇元素

References

DOM 的事件傳遞機制：捕獲與冒泡

Event Delegation 事件委派

[教學] 瀏覽器事件：Event Bubbling, Event Capturing 及 Event Delegation