关于原生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(){});

 

 

 

大概就讲到这些，比较简单，如果还没有理解还需自己在代码中多敲几遍。毕竟，绝知此事要躬行。

如有错误，还请指出以便改正。