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为某个div加入行样式
Jun 09 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jquery实现图片放大镜效果
Dec 23 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
python中遍历文件的3个方法
2014/09/02 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
python reduce 函数使用详解
2017/12/05 Python
python保存数据到本地文件的方法
2018/06/23 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
实习生个人的自我评价
2013/12/08 职场文书
就业协议书样本
2014/08/20 职场文书
离职报告格式
2014/11/04 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Python os和os.path模块详情
2022/04/02 Python