JavaScript如何实现基于事件委托的原理？

本文共计917个文字，预计阅读时间需要4分钟。

目录

一、什么是事件委托

二、事件委托的原理

三、事件委托的作用

四、什么是事件代理

事件代理利用事件冒泡原理，将子元素的事件绑定到父元素上。这样，当子元素上的事件发生时，会冒泡到父元素，父元素上的事件处理函数会被调用。例如，如果子元素是子元素，则当点击子元素时，绑定在父元素上的事件处理函数会被执行。

目录

• 一、什么是事件委托
• 二、事件委托的原理
• 三、事件委托的作用

一、什么是事件委托

事件委托也称为事件代理。就是利用事件冒泡，把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托就无法实现。

举个简单的例子：

例如快递员有100个快递要分别送给100个学生， 如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，应该怎样操作呢？这时快递员可以把100个快递委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。这样的话，快递员省事，同学们领取也更方便。这个过程就是一个委托事件。

二、事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

我们再来看看在具体的程序中是如何实现的吧！
比如，我们现在有一个无序列表，在无序列表里面有五个li,我们想要给每个li添加一个点击事件，这个时候，我们常规操作是通过循环给每个li添加点击事件。