JavaScript事件委托原理与用法实例分析


Posted in Javascript onJune 07, 2018

本文实例分析了JavaScript事件委托原理与用法。分享给大家供大家参考,具体如下:

在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单的使用,但是对于事件委托的原理不怎么知道。所以该博文会解释一下原生js的事件委托的原理,为什么会有事件委托,为什么可以这样用事件委托等等问题。

1. js中的事件流

在解析事件委托之前,我们先回顾一下js中的事件流,即冒泡和捕获。

① .冒泡:当下级节点触发某个事件的时候,该事件会逐级向上触发上级节点的同类事件。

② .捕获:和冒泡类似,只不过事件的顺序相反。即是从上级节点传递到下级节点

2. 事件委托原理

事件委托就是基于js的事件流产生的,事件委托是利用事件冒泡,将事件加在父元素或者祖先元素上,触发该事件。

<body>
  <div id="myDiv">
    <input type="button" value="按钮1" id="btn1">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
  </div>
</body>
<script type="text/javascript">
  document.getElementById("myDiv").onclick=function(e){
    e=window.event||e;
    var btnId=e.target.id;
    switch(btnId){
      case "btn1":
        console.log("按钮1");
      break;
      case "btn2":
        console.log("按钮2");
      break;
      case "btn3":
        console.log("按钮3");
      break;
    }
  }
</script>

上面的代码就是一个典型的事件委托案例。利用的原理就是事件冒泡,将事件加载父元素上,通过event参数来区别按钮的不同

3. 总结

通过对上面事件委托代码的观察,我们可以很容易得出事件委托的好处:

① .减少页面绑定事件数量,由于页面事件绑定数量越多,页面执行性能越差,所以事件委托可以提高页面的性能

② .事件委托可以灵活的处理子节点动态变化的场景,无论子节点增加还是减少,事件都无需重新绑定

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

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

Javascript 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 #Javascript
AngularJS 前台分页实现的示例代码
Jun 07 #Javascript
浅谈PDF.js使用心得
Jun 07 #Javascript
vue better scroll 无法滚动的解决方法
Jun 07 #Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 #Javascript
JavaScript 正则命名分组【推荐】
Jun 07 #Javascript
You might like
php验证码生成器
2017/05/24 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
python实现保存网页到本地示例
2014/03/16 Python
Python下的twisted框架入门指引
2015/04/15 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python中的取模运算方法
2018/11/10 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Shein英国:女性时尚网上商店
2019/04/10 全球购物
中层干部培训方案
2014/06/16 职场文书
企业挂职心得体会
2014/09/10 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
董事长致辞
2015/07/29 职场文书
信息技术国培研修日志
2015/11/13 职场文书
个人道歉信大全
2019/04/11 职场文书
Python 正则模块详情
2021/11/02 Python
win sever 2022如何占用操作主机角色
2022/06/25 Servers