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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
使用python编写监听端
2018/04/12 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
C有"按引用传递"吗
2016/09/06 面试题
酷瑞网络科技面试题
2012/03/30 面试题
超市重阳节活动方案
2014/02/10 职场文书
法律七进实施方案
2014/03/15 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
民事诉讼代理词
2015/05/25 职场文书
入学证明
2015/06/23 职场文书
交通安全教育心得体会
2016/01/15 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL