做什么?
事件委托的出现主要是解决监听事件的频繁。 比如, 有一个ul下面有20个li标签, 这个时候你需要监听这个20个li标签,那么直接监听的话肯定是很low的, 而且如果我们进行li标签的删除再添加这种效果, 那么新出现的li标签就没有监听事件咯。 事件委托的机制是利用了冒泡机制, 目前浏览器对触发事件都是:捕获-->向上冒泡, 所以懂了吧? 最开始我还以及委托是一个黑科技, 毕竟删除了元素后再添加也会有触发事件, 不过仔细一想就觉得原来如此。 但如果大家去不用jquery的delegate类似的方法去实现事件委托, 那么肯定会失败呢? 那么这是为什么呢? 这是因为事件委托是由 监听事件特性 + 指定上下文 来完成的, 是比dom层api更高一级实现的特性。看到这里懂了吧
简陋实现
<html> <head> <title></title> </head> <body> <div id="event">11 <li>li</li> <a>href</a> </div> <script type="text/javascript"> window.onload = function () { document.getElementById('event').addEventListener('click', function (event) { if (event.target.nodeName.toLowerCase() == 'li') { console.log('li标签事件'); } }); }; </script> </body> </html>