前言
在很早的一篇文章《JS事件流与DOM事件处理程序》中，有讲到过Javascript中的事件处理程序。DOM事件可以说是页面中最重要的一部分，提供用户与页面元素的交互，同时可以在事件中发送后台请求。今天这篇文章我们来看一看事件委托机制的实现。
Javascript
事件委托，顾名思义，就是将本来要触发在A元素身上的事件，委托给B元素来触发，例如像onclick，onmouseover等事件都可以通过事件委托去触发。
事件委托实际上是通过事件冒泡的原理，将事件绑定在父元素或者祖先元素上，通过父元素或祖先元素触发相应的事件。
通过单纯的文字描述可能不太好理解，我们来通过代码去看看事件委托机制有哪些优点？
使用事件委托机制绑定事件，可以减少内存的占用，从而提高事件处理速度。我们通过具体的实例来进行讲解。
首先我们来看看最基本的HTML页面的代码。
HTML代码
传统的Javascript写法
如果采用原始的Javascript写法，有一种最笨的办法是通过id获取到每个li元素，然后在每个li元素上绑定onclick事件，这种方法由于会有很多重复代码，这么low的代码我们就不写在这里。
这里写一个更好一点的方法，通过标签名获取到类数组元素，然后通过循环给每个li元素绑定事件，这样就只需要出现一次绑定事件的代码。
传统写法
但是，我们试想这样一种情况，如果页面上li元素过多，这样一个个绑定事件的做法是不是会很耗性能？这里我们就可以采用事件委托机制来解决这个问题。
事件委托写法
上述HTML部分的代码不变，我们只需要修改Javascript部分的代码。我们来看看通过事件委托如何实现。
因为事件委托是将事件绑定在父元素上，因此我们首先需要获取到父元素ul。
在事件委托中，我们需要用到event对象，不管在哪个事件中都会存在event对象。
考虑到浏览器的兼容性，通过event对象的target或者srcElement属性获取冒泡过程中的元素。
进行判断是不是需要处理的元素，然后执行事件。
通过上述的分析，我们可以得到以下的代码。
事件委托写法
通过上述的代码，我们发现同样可以达成我们的要求，而且这样的写法只需要在父元素上绑定事件，可以节省很大的内存空间，提高事件处理性能。
使用事件委托机制的第二个优点是，对于页面上新增的DOM元素，同样能够执行绑定的事件。而如果采用传统写法，新增的元素则不会具有绑定的事件。
传统写法
传统的写法
这就是采用传统写法的一个弊端，同样我们可以采取事件委托机制来解决这个问题。
事件委托写法
使用事件委托的写法，对于元素上绑定输出事件的代码不需要进行修改，只需要新增一个button元素事件即可，代码如下所示。
事件委托写法
今天这篇文章主要讲述了Javascript中的事件委托机制，在基础知识面试环节也是很常见的，大家掌握了吗？
版权声明：本站所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请举报，一经查实，本站将立刻删除。