JavaScript之事件委托实例(附原生js和jQuery代码)


Posted in jQuery onJuly 22, 2017

事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。

使用事件委托的优点

1、操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作

dom结构如下:

<ul id = "oUl">
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li> 
 <li class = "item"></li>
</ul>

当li被点击时,打印该li的值。

在我们还没有学事件委托的时候我们会遍历所有li并给它们添加一个click事件,比如这样:

var aLi = document.getElementsByTagName('li');

for(var i = 0; i < aLi.length; i++) // 遍历li
 aLi[i].addEventListener('click', function() { //给每个li添加事件
 console.log(this.innerHTML); 
 });

学了事件委托之后js原生代码如下:

var oUl = document.getElementById('oUl');

oUl.addEventListener('click', function(ev) {
 ev = ev||window.event;
 var tag = ev.target; // 触发事件的对象保存在事件的target里面
 console.log(tag.innerHTML);
})

jQuery代码如下:

$('#oUl').on('click', '.item', function() { 
 console.log($(this).html()); // this指向oUl中触发了click事件并且class为item的子元素
})

相比之下,事件委托只需要获取父元素并且不需要遍历li,效率提高了不少。

2、将事件委托给父元素后,动态创建(删除)的子元素不用重新绑定(解绑)事件,实现了元素与事件的同步更新

在以往的js事件监听中,用js动态创建的子元素是没有事件的,必须重新为它们绑定事件,但是用事件委托就不用这么麻烦了,不需要重新绑定事件依旧可以实现事件监听。

当然事件绑定也是有弊端的,因为它依赖于事件冒泡,如果不支持冒泡那么就不能实现事件绑定了,不过我认为这种几率还是不高的。还有就是会发生事件误判,比如页面中的button1和button2的作用是点击时弹出值,而button3的作用是点击是页面变色,这三个button的同一个事件实现功能不同,当你将click事件委托给它们共同的父元素那么就会出现事件误判。

所以我认为事件委托是发生在一个子集合的事件功能相同的情况下,如果不相同则不要使用事件委托,以免弄巧成拙。

在实际开发中,掌握事件绑定对于代码的规范性以及效率会有一定提高,总的来说利大于弊。

以上这篇JavaScript之事件委托实例(附原生js和jQuery代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现影院选座订座效果
Apr 13 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
浅析php数据类型转换
2014/01/09 PHP
php短址转换实现方法
2015/02/25 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
css配合jquery美化 select
2013/11/29 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python SVM 线性分类模型的实现
2019/07/19 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
教师个人考察材料
2014/12/16 职场文书
单位考核聘任报告
2015/03/02 职场文书
在人间读书笔记
2015/06/30 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript