關於原生Js的事件委托實現

事件委托原理：

事件冒泡機制

結合之前使用理解：

經常使用Jquery時經常會有一個問題，那便是對追加元素的動態事件監聽。如執行$("ul").append("<li class='li'></li>");時，新的.li點擊時$(".li").on(...)未被觸發。

而一般的解決方案為:從原本的 $(".li").on(...) 轉為$(".ul").on("click",".li",function(){})，這就是事件委托。

事件委托的優點：

• 大量減少內存占用，減少事件注冊。（原本需要對每個.li注冊，現在只對上級元素注冊）
• 新增元素實現動態綁定事件。 （如上案例的解決方案）

實現方式：

一、原生JS，IE8以上可用addEventListener();

可以理解為，獲取觸發父元素事件源的節點名稱是否為指定節點，是的話則執行

// 給ul添加監聽器
document.getElementById("ul").addEventListener("click",function(e) {
// e.target是被點擊的元素!
// 篩選觸發事件的子元素如果是li執行的事件
if(e.target && e.target.nodeName.toLowerCase() == "li") {
// 獲取到具體事件觸發的li，輸出其id
console.log("List item ",e.target.id.replace("post-")," was clicked!");
}
});

二、原生JS，IE8或IE8以下可用attachEvent

// 給ul添加監聽器
document.getElementById("ul").attachEvent("onclick", function(event) {
//event.srcElement是被點擊的元素!
if (event.srcElement.tagName.toLowerCase() === "li") {
event.srcElement.style.backgroundColor = "red";
}
})

三、Jquery

$("#ul").on("click","li",function(){});

 

 

 

大概就講到這些，比較簡單，如果還沒有理解還需自己在代碼中多敲幾遍。畢竟，絕知此事要躬行。

如有錯誤，還請指出以便改正。