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序列化后的表单值转换成Json
Jun 16 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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实现二进制和文本相互转换的方法
2015/04/18 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
Ext 今日学习总结
2010/09/19 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python入门篇之条件、循环
2014/10/17 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python中GIL的使用详解
2018/10/03 Python
python实发邮件实例详解
2019/11/11 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
户籍证明的格式
2014/01/13 职场文书
教师个人读书活动总结
2014/07/08 职场文书
弄虚作假心得体会
2014/09/10 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
化妆品促销活动总结
2015/05/07 职场文书
2019大学生实习报告
2019/06/21 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL