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,alert出现乱码问题的解决方法
Jun 19 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 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
多文件上传的例子
2006/10/09 PHP
用来给图片加水印的PHP类
2008/04/09 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Django中使用group_by的方法
2015/05/26 Python
Python列表(List)知识点总结
2019/02/18 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
自我鉴定 电子商务专业
2014/01/30 职场文书
上课迟到检讨书
2014/02/19 职场文书
小学班级口号
2014/06/09 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
自我检讨书怎么写
2015/05/07 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
英语读书笔记
2015/07/02 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
导游词之广西漓江
2019/11/02 职场文书