jQuery事件委托代码实践详解
更新时间：2019年06月21日 08:25:16 作者：wishyouhappy
这篇文章主要介绍了jQuery事件委托代码实践详解， 事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。,需要的朋友可以参考下
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利用FormData上传文件实现批量上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
下面小编就为大家带来一篇jquery弹出遮掩层效果【附实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-04-04
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
这篇文章主要介绍了jQuery实现的动态文字变化输出效果,采用jquery.quoterotator.min.js插件实现了文字动态变换显示的功能,并附带演示与demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
本文给大家分享的是一段使用jQuery+CSS3实现树叶飘落特效的代码，效果非常不错，分享给大家，希望大家能够喜欢2015-02-02
本篇文章主要介绍了jquery——九宫格大转盘抽奖实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
empty、remove和detach三者都有把元素移除的作用，但细微的差别，造就了它们的使命不同。下面给大家介绍jQuery中的empty、remove和detach的区别，感兴趣的朋友一起学习吧2016-04-04
这篇文章介绍了jQuery的UI组件，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
今天小编就为大家分享一篇关于JQuery Ajax执行跨域请求数据的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-12-12
给大家介绍一下利用javaScript和jQuery实现自动加载最简单的代码写法。2017-11-11
很多朋友不清楚(function(){... })();这几种写法各代表是什么意思，下面小编通过本教程给大家简单介绍下(function(){... })();知识，感兴趣的朋友跟着小编一起学习吧2016-08-08
最新评论