jQuery事件委托代码实践详解


Posted in jQuery onJune 21, 2019

javascript的事件模型,采用"冒泡"模式,子元素的事件会逐级向上"冒泡",成为父元素的事件。

在需要为较多的元素绑定事件时应该使用事件委托 event delegation

javascript事件传播

html如下:

<body>
<table>
<tr><td id="targetTd"></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>

添加脚本:

targetTd.onclick = function (event) {
console.log("Td is clicked");
};
document.body.onclick = function (event) {
console.log("Body is clicked");
};

点击td targetTd,结果如下:

Td is clicked
Body is clicked

使用stopPropagation可以阻止事件的传播(ie下使用cancelBubble)

eg:

targetTd.onclick = function (event) {
console.log("Td is clicked");
event.stopPropagation();
};
document.body.onclick = function (event) {
console.log("Body is clicked");
};

点击td targetTd,结果如下:

Td is clicked

js事件委托

如果我们想给上面的table中所有的td添加点击事件,可以通过循环绑定,或者是采用事件委托方式,如下:

document.body.onclick = function (event) {
if(event.target.tagName === "TD"){
console.log(event.target.tagName+" is clicked");
}
};

jQuery事件委托

jquery 事件绑定 on 方法定义如下:

.on( events [, selector ] [, data ], handler(eventObject) )

取消事件的绑定可以使用off

$(document).off("click", "td");

给td绑定点击事件可以使用:

$("td").on("click", function(e){
console.log(e.target.tagName+" is clicked");
});

加入selector参数,使用事件委托

$("table").on("click", "td", function(){
console.log(e.target.tagName+" ");
});

或者:

$(document).on("click", "td", function(){
console.log(e.target.tagName+" ");
});

此时事件冒泡到document或者table时会监测是否是td selector,匹配时会触发事件

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 #jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 #jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 #jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 #jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 #jQuery
You might like
php学习 字符串课件
2008/06/15 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
php实现中文转数字
2016/02/18 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
python笔记(2)
2012/10/24 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
开办饭店创业计划书
2013/12/28 职场文书
2014年团总支工作总结
2014/11/21 职场文书
学前教育见习总结
2015/06/23 职场文书
教学副校长工作总结
2015/08/13 职场文书
2015团员个人年度总结
2015/11/24 职场文书