微客导航 » 文章资讯 » JavaScript事件委托实现原理及优点进行

JavaScript事件委托实现原理及优点进行

2023-07-17 15:55:03 257

1、什么是事件委托？

事件委托就是利用冒泡的原理，将事件加到父元素或祖先元素上，触发执行效果。

例：在document中绑定click事件，当click的对象为按钮btn时，弹框显示按钮btn的值


哈哈

2、事件委托的优点

（1）可以提高JS性能

例：在ul上创建100个li，点击每个li都要弹框显示该li的value

传统写法：在每个li上都绑定onclick事件，并触发alert事件

事件委托：在document上绑定onclick事件，当触发onclick事件后，判断是不是

标签，如果是，则alert

标签的值。

（2）可以动态添加DOM元素，不需要因为元素的变动而修改事件绑定。

3、事件委托需要注意的地方

事件委托绑定的元素，最好是被监听元素的父元素，如

上面的

因为事件冒泡的过程也要耗时，越接近顶层，事件的「事件传播链」就越长，也就越耗时。

4、事件冒泡和事件捕获

如图，事件冒泡是从子元素向父元素传递事件，一层一层，事件委托就是利用了冒泡原理；事件捕获是从DOM最高层对象一层一层往子元素传播。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JavaScript事件委托实现原理及优点进行

热门推荐

随机推荐