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 div 弹出可拖动窗口
Feb 26 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
require.js的用法详解
Oct 20 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
php文档更新介绍
2011/07/22 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
layui table 参数设置方法
2018/08/14 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python贪吃蛇游戏代码
2020/04/18 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
小学数学国培感言
2014/03/10 职场文书
绩效管理实施方案
2014/03/19 职场文书
运动会广播稿100字
2014/09/14 职场文书
党员查摆剖析材料
2014/10/10 职场文书
银行稽核岗位职责
2015/04/13 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
阿里云日志过滤器配置日志服务
2022/04/09 Servers