Javascript中的事件委托机制

事件委托

事件委托，顾名思义，就是将本来要触发在A元素身上的事件，委托给B元素来触发，例如像onclick，onmouseover等事件都可以通过事件委托去触发。

事件委托实际上是通过事件冒泡的原理，将事件绑定在父元素或者祖先元素上，通过父元素或祖先元素触发相应的事件。

通过单纯的文字描述可能不太好理解，我们来通过代码去看看事件委托机制有哪些优点？

优点1-提高Javascript性能

使用事件委托机制绑定事件，可以减少内存的占用，从而提高事件处理速度。我们通过具体的实例来进行讲解。

我们要完成这样一个功能，页面上有一个列表，对每个列表元素进行点击，输出对应列表的值。

HTML代码

<ul id=‘list‘>
    <li id=‘item1‘>item1</li>
    <li id=‘item2‘>item2</li>
    <li id=‘item3‘>item3</li>
    <li id=‘item4‘>item4</li>
    <li id=‘item5‘>item5</li>
</ul>

传统的Javascript写法

如果采用原始的Javascript写法，有一种最笨的办法是通过id获取到每个li元素，然后在每个li元素上绑定onclick事件，这种方法由于会有很多重复代码，这么low的代码我们就不写在这里。

这里写一个更好一点的方法，通过标签名获取到类数组元素，然后通过循环给每个li元素绑定事件，这样就只需要出现一次绑定事件的代码。

window.onload = function () {
    var aUl = document.getElementById(‘list‘);
    var aLi = aUl.getElementsByTagName(‘li‘);

    for (var i = 0; i < aLi.length; i++) {
        aLi[i].onclick = function () {
            console.log(this.innerText);
        };
    }
};

通过上述的代码，在页面点击相应的li元素后，可以看到控制台输出相应的li元素值，达到我们的目的。

但是，我们试想这样一种情况，如果页面上li元素过多，这样一个个绑定事件的做法是不是会很耗性能？这里我们就可以采用事件委托机制来解决这个问题。

事件委托写法

上述HTML部分的代码不变，我们只需要修改Javascript部分的代码。我们来看看通过事件委托如何实现。

1. 因为事件委托是将事件绑定在父元素上，因此我们首先需要获取到父元素ul。
2. 在事件委托中，我们需要用到event对象，不管在哪个事件中都会存在event对象。
3. 考虑到浏览器的兼容性，通过event对象的target或者srcElement属性获取冒泡过程中的元素。
4. 进行判断是不是需要处理的元素，然后执行事件。