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 Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery编写QQ简易聊天框
Aug 27 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实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python 音频生成器的实现示例
2019/12/24 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
心理健康活动总结
2014/04/30 职场文书
大学迎新生标语
2014/10/06 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python