本文实例讲述了javascript事件监听与事件委托。分享给大家供大家参考，具体如下：
事件监听与事件委托
在js中，常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时，这种方式可能会带来性能影响。此时，我们可以用事件委托的方式来进行事件的监听。
每个事件都经历三个阶段
捕获 到达目标 冒泡事件委托需要用到事件的冒泡，冒泡就是事件发生时，上层会一层一层的接收这个事件。
如下页面结构：
<body> <div id="div1"> <div id="div2"> <button>按钮</button> </div> </div></body>
当点击按钮，首先button接收到事件，然后向上层冒泡，接着id="div1"接收到事件，接着是id="div2"，一直到达document的顶层。
所以可以添加一个事件处理器到父级，由他接收所有子节点的事件信息。这就是事件委托。
事件监听与事件委托性能比较
通过构建若干个button元素，并为其绑定事件监听器来比较事件监听与事件委托的性能。
1.构建若干个button元素，并添加到body中
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body id='body'> <script type="text/javascript"> var body = document.getElementById('body'); var fragment = document.createDocumentFragment(); for (var i = 0; i < 100; i++) { var btn = document.createElement('button'); btn.id = i; btn.className = 'btn'; btn.type = 'button'; btn.innerText = '按钮' fragment.appendChild(btn); } body.appendChild(fragment); </script></body></html>此时页面生成了100个按钮，id为0到99，class为'btn'；fragment是一个文档片段，相比较下面这种代码的好处是
for(var i = 0;i<100;i++){ var btn=document.createElement('button'); body.appendChild(btn);}前者页面只重排一次，后者页面重排了100次；所以若遇到大模块添加dom时，最好使用fragment
2.为button绑定事件监听器，并设置时间戳
var btn = document.querySelectorAll('.btn');var date1 = new Date();for (var i = 0; i < btn.length; i++) { (function(i) { btn[i].addEventListener('click', function() { console.log(i); }); })(i)}3.给body绑定click事件，实现事件的委托
var date2 = new Date();body.addEventListener('click', function(e) { var element = e.target; if (element.className == 'btn') { console.log(element.id); }})var date3 = new Date();下面我们来通过时间戳分析一下这两种方式的性能。
新闻热点
疑难解答
图片精选
