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实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
js单例模式详解实例
Nov 21 Javascript
js取模(求余数)隔行变色
May 15 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
JavaScript中的this机制
Jan 30 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
JS图片懒加载的优点及实现原理
Jan 10 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
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python压缩和解压缩zip文件
2015/02/14 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python中JWT用户认证的实现
2020/05/18 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
满月酒答谢词
2014/01/14 职场文书
企业元宵节主持词
2014/03/25 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
大型活动组织方案
2014/05/10 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python