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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
js 动态选中下拉框
Nov 26 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
基于jQuery的自动完成插件
2011/02/03 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python 数据加密代码
2008/12/24 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
Python列表与元组的异同详解
2019/07/02 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
linux 下selenium chrome使用详解
2020/04/02 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
教师节主题班会教案
2015/08/17 职场文书