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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 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 MSSQL 存储过程的方法
2008/12/24 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Python中如何引入第三方模块
2020/05/27 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
数据库什么时候应该被重组
2012/11/02 面试题
学生实习自我鉴定
2013/10/11 职场文书
24岁生日感言
2014/01/13 职场文书
全神贯注教学反思
2014/02/03 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
《分一分》教学反思
2014/04/13 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
撤诉申请书法院范本
2015/05/18 职场文书