谈谈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、动态绑定事件，比如之前我们增加一个元素，还需要重新给这个元素绑定事件，但是用事件委托就不用这么麻烦了，因为事件不是绑定在目标元素上的，而是绑定在已经存在于页面上的父元素，冒泡到父元素上时，执行绑定在父元素上的事件处理函数，这样能减少很多不必要的工作。