1、多种不同的定义
1.1、通俗的讲,事件委托就是把一个元素响应事件(click、keydown等)的函数委托到外层元素上。
1.2、简单的讲,事件委托就是利用JavaScript事件冒泡的特性,将内层元素的事件委托(绑定)给外层元素处理。
1.3、一般来讲,事件委托会把一个或者一组元素的事件委托(绑定)到它的父层元素或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。
2、普通写法(不使用事件委托)
<ul>
<li>li 1 号</li>
<li>li 2 号</li>
<li>li 3 号</li>
</ul>
<button id="btn">添加</button>
// 通过标签名获取元素
let oUl = document.getElementsByTagName("ul")[0];
let oLi = document.getElementsByTagName("li");
// 遍历元素给每个元素添加点击事件
for (let i = 0; i < oLi.length; i++) {
oLi[i].onclick = function() {
console.log(oLi[i].innerText);
};
};
// 通过id获取按钮元素
let btn = document.getElementById("btn");
// 给按钮添加点击事件
btn.onclick = function() {
// 创建新的li
let aLi = document.createElement("li");
// 给li赋值
aLi.innerHTML = `li ${oLi.length+1} 号`;
// 为新节点单独添加事件
aLi.onclick = function() {
console.log(aLi.innerText);
};
// 把li展示到页面上
oUl.appendChild(aLi);
};
总结
从上面的代码可以看到,用for循环给相应的li元素添加点击事件,每添加一个就多一次dom操作,加上按钮点击总共4次。当添加新的li元素时,还要给新li元素添加点击事件,这无疑有些繁琐,而且dom操作的次数没有做优化,显然当页面的li元素很多的时候,性能将会受到影响。
3、事件委托写法
<ul>
<li>li 1 号</li>
<li>li 2 号</li>
<li>li 3 号</li>
</ul>
<button id="btn">添加</button>
// 通过标签名获取元素
let oUl = document.getElementsByTagName("ul")[0];
let oLi = document.getElementsByTagName("li");
// 直接给ul添加点击事件
oUl.onclick = function(ev) {
// ev对象的兼容处理
ev = ev || window.event;
// 通过ev对象的target找到触发事件的元素
// 此操作的作用是:拿到对应的元素
let target = ev.target || ev.srcElement;
// 需求中的操作
// target.nodeName.toLowerCase()获取元素的操作
// 写法一
if (target.nodeName.toLowerCase() == "li") {
console.log(target.innerText);
};
// 写法二
console.log(target.innerText);
};
// 通过id获取按钮元素
let btn = document.getElementById("btn");
// 为按钮添加点击事件
btn.onclick = function(ev) {
// 新建li元素
let aLi = document.createElement("li");
// 给li赋值
aLi.innerHTML = `li ${oLi.length+1} 号`;
// 直接将新li元素放到ul上
oUl.appendChild(aLi);
};
总结
将上面的代码和普通写法进行比对,显然用事件委托的写法更加的简洁,不仅能减少代码量,同时还能减少dom操作次数,实现对性能的优化,简直一举多得。