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中map函数的两种方式
Apr 07 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP+javascript模拟Matrix画面
2006/10/09 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
判断对象是否Window的实现代码
2012/01/10 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python request使用方法及问题总结
2020/04/26 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Jar包的作用是什么
2014/03/30 面试题
C#笔试题集合
2013/06/21 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
初二物理教学反思
2014/01/29 职场文书
大学校务公开实施方案
2014/03/31 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
乔迁新居祝福语
2019/11/04 职场文书
react 路由Link配置详解
2021/11/11 Javascript
基于redis+lua进行限流的方法
2022/07/23 Redis