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 相关文章推荐
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 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
用libtemplate实现静态网页生成
2006/10/09 PHP
global.php
2006/12/09 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python 解析XML文件
2009/04/15 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python结合API实现即时天气信息
2016/01/19 Python
Python 常用string函数详解
2016/05/30 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python延时操作实现方法示例
2018/08/14 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python中的测试框架
2020/11/13 Python
一道SQL存储过程面试题
2016/10/07 面试题
2014年两会学习心得范例
2014/03/17 职场文书
2014年党课学习材料
2014/05/11 职场文书
公司委托书格式
2014/08/01 职场文书
走群众路线剖析材料
2014/10/09 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
个人道歉信大全
2019/04/11 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技