javascript事件监听与事件委托实例详解


Posted in Javascript onAugust 16, 2019

本文实例讲述了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 - date1);

通过改变button的数量,得到以下数据(单位:ms):

在360兼容模式下:

  • 当button数量为100时,平均为 6 0
  • 当button数量为400时,平均为 20 0
  • 当button数量为1000时,平均为 48 0

在新版谷歌下:

  • 当button数量为1000时,平均为 3 0

可见当页面中有大量元素需要绑定事件时,并不是所有的事件都会被触发,而这时对所有需要监听的元素都绑定事件处理器无疑是要花费代价的,而通过事件委托的方式可以很好的解决性能问题,不需要为每个元素都绑定事件监听器。但是要写一些逻辑代码来判断事件源。所以,如果你的web项目对性能要求极为苛刻,事件委托也不失于一种优雅的选择

PS:这里再为大家附上javascript系统自带事件参考表供大家参考查询:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

更多关于JavaScript相关内容可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
JS将unicode码转中文方法
May 08 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 #Javascript
详解Vue中组件传值的多重实现方式
Aug 16 #Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 #Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 #Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 #Javascript
基于vue写一个全局Message组件的实现
Aug 15 #Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 #Javascript
You might like
php自定义加密与解密程序实例
2014/12/31 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
解决vue 表格table列求和的问题
2019/11/06 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
python与js主要区别点总结
2020/09/13 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
社会实践自我鉴定
2013/11/07 职场文书
新品发布会策划方案
2014/06/08 职场文书
作风大整顿心得体会
2014/09/10 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang