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


Posted in Javascript onAugust 29, 2020

1、什么是事件委托?

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

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

<body>
<button id="btn" value="嘿嘿">哈哈</button>
<script>
 window.onload=function () {
  let btn=document.getElementById("btn")
  document.onclick=function (e) {
   // console.log(e.target)
   if(e.target===btn){
    alert(btn.value)
   }
  }
 }
</script>
</body>

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

2、事件委托的优点

(1)可以提高 JS 性能

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

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

事件委托:在 document 上绑定 onclick 事件,当触发 onclick 事件后,判断是不是 <li> 标签,如果是,则 alert <li> 标签的值。

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

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

事件委托绑定的元素,最好是被监听元素的父元素,如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。

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

4、事件冒泡 和 事件捕获

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
JS实现鼠标移动拖尾
Dec 27 Javascript
JS如何判断对象是否包含某个属性
Aug 29 #Javascript
JS获取当前时间戳方法解析
Aug 29 #Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 #Javascript
JS访问对象两种方式区别解析
Aug 29 #Javascript
js在HTML的三种引用方式详解
Aug 29 #Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 #Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 #Javascript
You might like
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
PHP面试题集
2016/12/18 面试题
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
linux比较文件内容的命令是什么
2013/03/04 面试题
统计员岗位职责
2013/11/14 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
MySQL一些常用高级SQL语句
2021/07/03 MySQL
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS