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 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
js实现分页功能
May 24 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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
我的论坛源代码(九)
2006/10/09 PHP
COM in PHP (winows only)
2006/10/09 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python列表计数及插入实例
2014/12/17 Python
python实现Floyd算法
2018/01/03 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
办公室副主任职责范本
2014/03/08 职场文书
士力架广告词
2014/03/20 职场文书
事业单位考核材料
2014/05/21 职场文书
农村门前三包责任书
2014/07/25 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
会计专业求职信范文
2015/03/19 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
荒岛余生观后感
2015/06/09 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python