event delegation (事件委託)

定義
是一種將事件處理委派給上層的技術，透過上層來監聽下層的事件。

什麼時候用到呢？

1. 提升效能的時候：如果有很多下層都需要監聽某件事件，就可以使用
2. 動態元素產生時：因為上層已經有這些事件了，所以只需要委派即可

怎麼運作的？
發生在「冒泡階段」(Bubbling Phase)，當觸發事件時，就會向上冒泡，直達根元素。透過綁定後，就能捕捉到這件事。

舉例：

<ul id="parent">
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
  <button id="btn3">Button 3</button>
</ul>

document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') {
        console.log('你點擊了: ' + event.target.textContent);
    }
});

這邊注意的是tagName取回來的會是大寫的標籤名，所以才要使用BUTTON。