事件委託實踐
阿新 • • 發佈：2020-10-20
背景：
在秋招海康威視面試時，面試官有問我這樣一道題：
一個元素中有很多個元素，怎麼樣確定是點的哪個元素？
由於我對於事件委託的概念記不太清了，回答得不是很清楚，在這裡整理一下。
事件委託
在紅寶書中有如下概念：
事件流：描述的是從頁面中接收事件的順序；
事件冒泡（IE）：事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的節點。
事件捕獲：不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。用意在於事件達到預定目標前捕獲它。
事件委託：對“事件處理程式過多”問題的解決方案就是事件委託。利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件。
解決問題
根據問題來設計場景，假設一個ul裡面包裹五個li。我要點選不同li輸出不同的結果。
<body> <ul id="ulEvent"> <li id="sayHi">sayHi</li> <li id="sayYes">sayYes</li> <li id="sayNo">sayNo</li> <li id="sayHa">sayHa</li> <li id="sayEn">sayEn</li> </ul> <script> window.onload=function(){ var ulEvent=document.getElementById("ulEvent"); ulEvent.onclick = function (ev) { var ev = ev || window.event; var target = ev.target || ev.srcElement; //普通瀏覽器或者ie switch(target.id){ case 'sayHi' : alert('Hi'); break; case 'sayYes' : alert('Yes'); break; case 'sayNo' : alert('No'); break; case 'sayHa' : alert('Ha'); break; case 'sayEn' : alert('En'); break; } } } </script> </body>
注意：
Event物件提供了一個屬性叫target，可以返回事件的目標節點，我們成為事件源，也就是說，target就可以表示為當前的事件操作的dom，但是不是真正操作dom，這個是有相容性的，標準瀏覽器用ev.target，IE瀏覽器用event.srcElement。
所以據此我可以回答面試官：可以用target來獲得目標節點。
在獲得target後新增控制檯輸出。
當我點選yes時，控制檯輸出：
能得到點選時的節點。