javascript事件监听与事件委托实例详解
本文实例讲述了javascript事件监听与事件委托。分享给大家供大家参考,具体如下:
事件监听与事件委托
在js中,常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响。此时,我们可以用事件委托的方式来进行事件的监听。
每个事件都经历三个阶段
- 捕获
- 到达目标
- 冒泡
事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件。
如下页面结构:
当点击按钮,首先button接收到事件,然后向上层冒泡,接着id="div1"接收到事件,接着是id="div2",一直到达document的顶层。
所以可以添加一个事件处理器到父级,由他接收所有子节点的事件信息。这就是事件委托。
事件监听与事件委托性能比较
通过构建若干个button元素,并为其绑定事件监听器来比较事件监听与事件委托的性能。
1.构建若干个button元素,并添加到body中
varbody=document.getElementById('body'); varfragment=document.createDocumentFragment(); for(vari=0;i<100;i++){ varbtn=document.createElement('button'); btn.id=i; btn.className='btn'; btn.type='button'; btn.innerText='按钮' fragment.appendChild(btn); } body.appendChild(fragment);