javascript事件监听与事件委托
事件监听与事件委托
在js中,常用到element.addEventListener()
来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响。此时,我们可以用事件委托的方式来进行事件的监听。
每个事件都经历三个阶段
- 捕获
- 到达目标
- 冒泡
事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件。
如下页面结构:
<body><div id="div1"><div id="div2"><button>按钮</button></div></div>
</body>
当点击按钮,首先button接收到事件,然后向上层冒泡,接着id="div1"
接收到事件,接着是id="div2"
,一直到达document的顶层。
所以可以添加一个事件处理器到父级,由他接收所有子节点的事件信息。这就是事件委托。
事件监听与事件委托性能比较
通过构建若干个button元素,并为其绑定事件监听器来比较事件监听与事件委托的性能。
1.构建若干个button元素,并添加到body中
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body id='body'><script type="text/javascript">var body = document.getElementById('body');var fragment = document.createDocumentFragment();for (var i = 0; i < 100; i++) {var btn = document.createElement('button');btn.id = i;btn.className = 'btn';btn.type = 'button';btn.innerText = '按钮'fragment.appendChild(btn);}body.appendChild(fragment);</script>
</body>
</html>
此时页面生成了100个按钮,id
为0到99,class
为'btn'
;fragment
是一个文档片段,相比较下面这种代码的好处是
for(var i = 0;i<100;i++){var btn=document.createElement('button');body.appendChild(btn);
}
前者页面只重排一次,后者页面重排了100次;所以若遇到大模块添加dom时,最好使用fragment
2.为button绑定事件监听器,并设置时间戳
var btn = document.querySelectorAll('.btn');var date1 = new Date();for (var i = 0; i < btn.length; i++) {(function(i) {btn[i].addEventListener('click', function() {console.log(i);});})(i)}
3.给body绑定click事件,实现事件的委托
var date2 = new Date();body.addEventListener('click', function(e) {var element = e.target;if (element.className == 'btn') {console.log(element.id);}})var date3 = new Date();
下面我们来通过时间戳分析一下这两种方式的性能。
console.log(date2 - date1);
console.log(date3 - date2);
通过改变button的数量,得到以下数据(单位:ms):
在360兼容模式下:
- 当button数量为100时,平均为 6 0
- 当button数量为400时,平均为 20 0
- 当button数量为1000时,平均为 48 0
在新版谷歌下:
- 当button数量为1000时,平均为 3 0
可见当页面中有大量元素需要绑定事件时,并不是所有的事件都会被触发,而这时对所有需要监听的元素都绑定事件处理器无疑是要花费代价的,而通过事件委托的方式可以很好的解决性能问题,不需要为每个元素都绑定事件监听器。但是要写一些逻辑代码来判断事件源。所以,如果你的web项目对性能要求极为苛刻,事件委托也不失于一种优雅的选择
转载于:https://www.cnblogs.com/smartXiang/p/6218716.html
javascript事件监听与事件委托相关推荐
- 事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
- 事件绑定,事件监听,事件委托
事件绑定,事件监听,事件委托 事件绑定 一个元素只能绑定一个事件 obj.on+事件名称=funciton(){} 事件监听 事件监听可以监听很多很多事件. this指向当前调用触发事件的主体对象. ...
- 移除元素所有事件监听_DOM 事件模型或 DOM 事件机制
DOM 事件模型 DOM 的事件操作(监听和触发),都定义在EventTarget接口.所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest.Audi ...
- chromedp网络监听_动态爬虫三:监听网络事件 + 监听js事件
一: 概述 上两篇文章介绍了cdp协议和chromedp库,从这篇文章开始动手实战一下,我们要拿到页面上更多的网络请求,最直接的想法就是类似于开发者工具里的network,只有一有网络请求就显示在列表 ...
- JS中事件绑定的方式以及事件监听和事件的委托
在javascript中,到我目前的学习中总结得到的认知是在事件触发阶段主要是由于事件流: 我们在HTML中先设置一个div: <div class="box">< ...
- angular4点击事件监听_angular 事件广播和事件监听
一,angularjs $broadcast $emit $on的处理思想 在一个controller里面通过事件触发一个方法,在方法里面通过$broadcast或$emit来定义一个变量,在父,子c ...
- JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用
一.on事件 为dom节点添加多个on事件只会执行最后的那个事件,因为最后的指定的on事件指向最后的那个函数,代码如下所示: function method1(){console.log('我是方法1 ...
- Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听 参数: ...
- vue/xx/事件监听,按键与键码值
vue中的事件监听 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
最新文章
- 【Linux】函数与参数
- 手把手Fiddler掌握
- windows10 上运行 linux -- WSL(Windows Subsystem for Linux)
- .Net开发人员应该下载的十种必备工具(二)
- c/s三层结构信息系统的三个层次_如何使用ABP框架(2)三层架构与领域驱动设计的对比...
- gdb的user-define command
- OJ1078: a+b(多实例测试1)(C语言数组解题)
- java循环输出_Java实现excel导出(内容循环多个)
- mysql数据库永久链接_PHP使用数据库永久连接方式(mysql_pconnect)操作MySQL的是与非...
- uploadify一次上传多个图片:效果展示
- Java虚拟机中的堆(Heap)
- InfoPath2003 教程
- 一:LAMP 架构简介
- 【系统安装】MediaCreationTool工具制作U盘安装win10系统
- tomcat6升级到tomcat7配置的修改
- android信鸽推送demo_腾讯信鸽推送(java版)
- Python运算(五)统计statistic模块
- ibm tivoli_在Tivoli Access Manager环境中管理TDS 6.0代理服务器并进行故障排除
- 路由器配置 校园网账号独立登录 DHCP关闭
- 【电子数据取证】8个门道儿
热门文章
- 【Pytorch神经网络实战案例】19 神经网络实现估计互信息的功能
- 卷积神经网络(基础篇)
- nginx集群_使用Nginx+Tomcat+keepalived 搭建高性能高可用性负载均衡集群
- python中split函数_python strip()函数和Split函数的用法总结
- HTML文件上传对象file
- 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
- py2中存储的pickle和py3中pickle无法读取的兼容性问题解决方案
- 数据库和ORMS:使用Tortoise ORM与数据库通信
- LeetCode 873. 最长的斐波那契子序列的长度(动态规划)
- win7家庭版远程桌面补丁_无需惊慌!微软漏洞数月后再被“预警”打补丁即可防御...