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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
百度地图api如何使用
Aug 03 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
用php解析html的实现代码
2011/08/08 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
js 走马灯简单实例
2013/11/21 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
中专毕业生自我鉴定范文
2013/11/09 职场文书
文体活动总结范文
2014/05/05 职场文书
国际贸易求职信
2014/07/05 职场文书
班级课外活动总结
2014/07/09 职场文书