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 相关文章推荐
js的event详解。
Sep 06 Javascript
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
Javascript面向对象编程
Mar 18 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 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的Yii框架的基本使用示例
2015/08/21 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
javascript this用法小结
2008/12/19 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
浅析Python中的多重继承
2015/04/28 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python编写猜数字小游戏
2019/10/06 Python
python3实现单目标粒子群算法
2019/11/14 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
应届大学生求职的自我评价
2013/11/17 职场文书
护士实习鉴定范文
2013/12/22 职场文书
用JS写一个发布订阅模式
2021/11/07 Javascript
HDFS免重启挂载新磁盘
2022/04/06 Servers