一：Hello
js中事件委托主要是为了解决两个问题
1）在节点比较多的时候循环绑定事件比较占内存，浪费性能
2）新追加节点的事件的注册
二：原理分析
直接上demo，结尾处有完整代码。
1.DOM 结构
<ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb</li> <li>cccccccc</li> </ul>
2.需求是给每个li注册一个绑定事件 fnClick
这是传统方式，获取li，循环绑定
1 for ( var i = 0; i < aLi.length; i++ ) { 2 aLi[i].onclick = fnClick; 3 }
tips： 会遇到的问题是 1.浪费性能 2.新追加节点无法添加事件 3.写法丑 -- 如开头所说
事件委托登场
1 oUl.onclick = function (ev) { 2 var target = ev.target; 3 // 对于元素节点来说 nodeName 和 tagName 是一样的 4 if (target.tagName.toLowerCase() == 'li') { 5 console.log(target.innerHTML); 6 } 7 };
tips:
1.委托的原理是将事件添加到父节点ul 上，在通过事件对象来找到对应的节点
2.对于元素节点来说，nodeName 和 tagName 是一样的，获取到的是标签的 大写 名
3.使用事件委托的时候新添加的节点也会有对应的事件
具体见完整代码（作为暖男，我特意去掉了行号，方便复制）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件委托</title> <style> li { border: 1px solid #999; margin-bottom: 10px; } </style> </head> <body> <button id="btn">追加节点</button> <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb</li> <li>cccccccc</li> </ul> <script> var oUl = document.getElementById("ul"); var aLi = oUl.getElementsByTagName("li"); var addBtn = document.getElementById("btn"); var num = 0; var fnClick = function () { console.log(1); }; // 这个是十分丑陋的而且十分浪费性能的解决方式 // for ( var i = 0; i < aLi.length; i++ ) { // aLi[i].onclick = fnClick; // } oUl.onclick = function (ev) { var target = ev.target; // 对于元素节点来说 nodeName 和 tagName 是一样的 if (target.tagName.toLowerCase() == 'li') { console.log(target.innerHTML); } }; addBtn.onclick = function () { num ++; var newLi = document.createElement("li"); newLi.innerHTML = num * 111111; oUl.appendChild( newLi ); }; </script> </body> </html>