JavaScript事件委托原理是什么
JavaScript事件委托原理是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
一、什么是事件委托
事件委托也称为事件代理。就是利用事件冒泡,把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就无法实现。
举个简单的例子:
例如快递员有100个快递要分别送给100个学生, 如果一个个的送花费时间较长。同时每个学生领取的时候,也需要排队领取,也花费时间较长,应该怎样操作呢?这时快递员可以把100个快递委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可。这样的话,快递员省事,同学们领取也更方便。这个过程就是一个委托事件。
二、事件委托的原理
不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
我们再来看看在具体的程序中是如何实现的吧!
比如,我们现在有一个无序列表,在无序列表里面有五个li,我们想要给每个li添加一个点击事件,这个时候,我们常规操作是通过循环给每个li添加点击事件。
代码如下所示:
- 111111
- 222222
- 333333
- 444444
- 555555
运行结果为:
这种方法的确可以实现我们的点击操作,但是这个过程中,由于每次都要给li添加点击事件,造成访问DOM的次数过多,会延长整个页面的交互就绪时间。
所以,这里,我们就可以用到事件委托,即给ul注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击li,事件会冒泡到ul上,ul有注册事件,就会触发事件监听器。
实现代码为:
运行结果为:
成功显示。
三、事件委托的作用
通过上面的操作,我们可以得到:在事件委托中,我们只操作一次 DOM ,大大的提高了程序的性能。
关于JavaScript事件委托原理是什么问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。