document.getElementsByTagName("ul")[0].addEventListener('click',function(e){
alert("點擊的內容是："+e.target.innerHTML);
});
注意：js實現事件委託有三個步驟：
第一步：給父元素綁定事件
給元素ul添加綁定事件，通過addEventListener為點擊事件click添加綁定
第二步：監聽子元素的冒泡事件
這裡默認是冒泡，點擊子元素li會向上冒泡
第三步：找到是哪個子元素的事件
通過匿名回調函數的參數e用來接收事件對象，通過target獲取觸發事件的目標
2、js事件委託的好處：
事件委託的好處1：事件委託技術可以避免對每個字元素添加事件監聽器，減少操作DOM節點的次數，從而減少瀏覽器的重繪和重排，提高代碼的性能。
我們可以看一個例子：我們要做動態的添加li。點擊button動態添加li
- aaaaaaaa
- bbbbbbbb
- cccccccc
不用事件委託我們會這樣做：
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
for(var i=0; i aLi[i].onmouseover = function(){ this.style.background = "red"; } aLi[i].onmouseout = function(){ this.style.background = ""; } }
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}
這樣做我們可以看到點擊按鈕新加的li上面沒有鼠標移入事件來改變他們的背景顏色。
因為點擊添加的時候for循環已經執行完畢。
那麼我們用事件委託的方式來做。就是html不變
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}
事件委託的好處2：使用事件委託，只有父元素與DOM存在交互，其他的操作都是在JS虛擬內存中完成的，這樣就大大提高了性能。
閱讀更多 美食代碼喵 的文章
關鍵字: 編程語言 JavaScript 委託
