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 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 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
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
chrome原生方法之数组
2011/11/30 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python中tell()方法的使用详解
2015/05/24 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
个人现实表现材料
2014/02/04 职场文书
一文搞懂Java中的注解和反射
2022/06/21 Java/Android