关于原生Js的事件委托实现

日期: 2月前 人气: - 评论: 0

事件委托原理:

事件冒泡机制

结合之前使用理解:

经常使用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(){});

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

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