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优化专题之Loading and Execution加载和运行
Jan 20 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
vue增删改查的简单操作
Jul 15 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
详解JavaScript中的链式调用
Nov 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+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中type的构造函数参数含义说明
2015/06/21 Python
Python2.x与Python3.x的区别
2016/01/14 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
合伙协议书范本
2014/04/21 职场文书
小学教师评语大全
2014/04/23 职场文书
小学生倡议书范文
2014/05/13 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
小学教师年度个人总结
2015/02/05 职场文书
走近毛泽东观后感
2015/06/04 职场文书
靠谱的活动总结
2019/04/16 职场文书