事件委托（代理）

1、多种不同的定义

1.1、通俗的讲，事件委托就是把一个元素响应事件（click、keydown等）的函数委托到外层元素上。 1.2、简单的讲，事件委托就是利用JavaScript事件冒泡的特性，将内层元素的事件委托（绑定）给外层元素处理。 1.3、一般来讲，事件委托会把一个或者一组元素的事件委托（绑定）到它的父层元素或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

2、普通写法（不使用事件委托）

<ul> <li>li 1 号 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 号 // 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操作次数，实现对性能的优化，简直一举多得。