谈谈JS事件委托
在上一篇博客中我们了解了事件流中的事件冒泡和事件捕获,那么事件委托又是什么呢?命名这么相似,肯定是有一定关系的,那么又有什么关系呢?所以接下来我们来详细了解一下事件委托。
什么是事件委托?
事件委托也称事件代理,就是利用事件冒泡,把事件加到父级上,触发执行效果。
简单点来说就是把本来自己要干的事情委托给别人去干。
事件委托用在哪儿?
我们大家应该都用过列表标签,如下:
<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ul>
当我们想要给列表中的li实现点击事件,点击相应的li获取li中的内容,于是我们这样写:
<script> window.onload = function() { var lis = document.querySelectorAll('li'); //获取所有列 for (var i = 0; i < lis.length; i++) { lis[i].addEventListener('click', function () { console.log(this.innerHTML); }); } } </script>
当然这样一看代码也没什么问题,通过循环给每个li加事件,但想一想如果我们有很多个li,是不是要加很多次事件,这样其实是非常耗性能的。那么我们就会想,有没有只加一个事件就能实现相同的功能。答案当然是有的,那就是利用事件冒泡原理进行事件委托,把事件绑定到父元素ul身上,代码如下:
<script> window.onload = function() { let ul = document.querySelector('ul');//获取父元素 ul.addEventListener('click',function(e){//e就是event对象 console.log(e.target.innerHTML); },false); } </script>
什么是event对象?
- 任何事件触发后将产生一个event对象。
- event对象包含了这个事件的详细信息,如事件发生时的鼠标位置、键盘按键状态和 触发对象等。
- 绑定事件处理函数时,第一个参数就是event对象。
代码中的 e.target 能访问到事件源,就是触发本次事件的源头。另一个比较容易搞混淆的 e.currentTarget 是指向添加监听事件的对象(绑定事件的dom元素),也就是此代码中的ul。
事件委托有什么好处?
1、减少了事件监听器。
2、减少内存消耗,提高了页面性能,这主要还是减少了事件处理函数的数量
3、动态绑定事件,比如之前我们增加一个元素,还需要重新给这个元素绑定事件,但是用事件委托就不用这么麻烦了,因为事件不是绑定在目标元素上的,而是绑定在已经存在于页面上的父元素,冒泡到父元素上时,执行绑定在父元素上的事件处理函数,这样能减少很多不必要的工作。