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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
JQuery实现图片轮播效果
May 08 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python numpy存取文件的方式
2020/04/01 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
公司离职证明标准样本
2014/10/05 职场文书
师德师风事迹材料
2014/12/20 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
职工培训工作总结
2015/08/10 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python