Javascript中的事件委托机制

事件委托

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

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

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

优点1-提高Javascript性能

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

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

首先我们来看看最基本的HTML页面的代码。

HTML代码

• 传统的Javascript写法

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

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

传统写法

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

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

• 事件委托写法

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

1. 因为事件委托是将事件绑定在父元素上，因此我们首先需要获取到父元素ul。

2. 在事件委托中，我们需要用到event对象，不管在哪个事件中都会存在event对象。

3. 考虑到浏览器的兼容性，通过event对象的target或者srcElement属性获取冒泡过程中的元素。

4. 进行判断是不是需要处理的元素，然后执行事件。

通过上述的分析，我们可以得到以下的代码。

事件委托写法

通过上述的代码，我们发现同样可以达成我们的要求，而且这样的写法只需要在父元素上绑定事件，可以节省很大的内存空间，提高事件处理性能。

优点2

使用事件委托机制的第二个优点是，对于页面上新增的DOM元素，同样能够执行绑定的事件。而如果采用传统写法，新增的元素则不会具有绑定的事件。

• 传统写法

首先我们给页面添加一个button，点击button的时候会动态的添加一个li元素，并给予特定的值，然后点击新增的li元素，看控制台会不会输出相应的值。

传统的写法

通过传统的写法，在点击button元素后会自动添加子li元素，但是通过点击新增的li元素，我们发现在控制台并不会输出相应的元素值。

这就是采用传统写法的一个弊端，同样我们可以采取事件委托机制来解决这个问题。

• 事件委托写法

使用事件委托的写法，对于元素上绑定输出事件的代码不需要进行修改，只需要新增一个button元素事件即可，代码如下所示。

事件委托写法

通过上述写法，在点击button元素后，页面上会新增li元素，而且点击新增的li元素，控制台会输出相应的li元素值，完美解决了传统写法的问题。

转自 http://www.toutiao.com/i6431537377319059969/