事件委派(Event Delegation)
事件委派類似綁定作用，於之前文章中有說明到冒泡事件與監聽事件之間的特性，我們進一步去探討假如過多的監聽事件，我們可以使用事件委派(event delegation)去做統一處理。
說明事件委派、事件物件
事件委派註冊
我們以一段code來說明，
1
2
3
4
5
6
7
8
9
10
11
| <div id="menu">
<button data-key="add">add</button>
<button data-key="update">update</button>
<button data-key="remove">remove</button>
</div>
<script>
let menu=document.querySelector("#menu");
menu.addEventListener("click", function(){
console.log("Clicked")
});
</script>
|
上述code我們將監聽事件綁(註冊)在父層，這就是事件委派最初步的概念。
因為我們發現無論點擊(click)哪個按鈕，父層都會經事件流程中的冒泡過程而同樣被點擊，上述我們設定只有三個btn,假如今天有10個、100個，依然可以藉由綁定在父層，而皆能被點擊。
事件物件event.target屬性
由上述概念我們明白藉由註冊在父層以取得統一的點擊管理，接下來我們可以藉由e.target屬性，來區分點擊的按鈕，code撰寫如下:
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="menu">
<button data-key="add">新增</button>
<button data-key="update">更新</button>
<button data-key="remove">移除</button>
</div>
<script>
let menu=document.querySelector("#menu");
menu.addEventListener("click", function(event){
let key=event.target.getAttribute("data-key");
console.log(event.target.textContent);
});
</script>
|
顯現如下:
