事件委托原理：
事件冒泡机制
结合之前使用理解：
经常使用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(){});
大概就讲到这些，比较简单，如果还没有理解还需自己在代码中多敲几遍。毕竟，绝知此事要躬行。
如有错误，还请指出以便改正。