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，匹配时会触发事件

赞 (0)

相关推荐

  • jQuery动态追加页面数据以及事件委托详解

    jQuery动态追加页面数据以及事件委托详解

    我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了. 首先效果图如下: 这个只截取了最底下的一部分页面.在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失. 我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完. 首先body中代码如下: <div id = "container

  • JQuery事件委托原理与用法实例分析

    本文实例讲述了JQuery事件委托原理与用法.分享给大家供大家参考,具体如下: 事件委托就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作.事件委托首先可以极大的减少事件绑定次数,其次也可以让新加入的子集元素也拥有相同的操作. 一般绑定事件的写法以及事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • 浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元

  • JavaScript之事件委托实例(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite

  • jQuery事件委托之Safari

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) $(element).click(function(){ //do something }) //事件委托(Jquery) $(parents).on("click",element,function(){ //do something }) 事件委托的原理 事件委托将事件监听绑定在目标元

  • jQuery事件委托代码实践详解

    javascript的事件模型,采用"冒泡"模式,子元素的事件会逐级向上"冒泡",成为父元素的事件. 在需要为较多的元素绑定事件时应该使用事件委托 event delegation javascript事件传播 html如下: <body> <table> <tr><td id="targetTd"></td><td></td><td></td&

  • JavaScript中事件委托的示例详解

    JavaScript中事件委托的示例详解

    目录 事件流 事件委托 结尾 大家好,我是前端西瓜哥.今天我们来认识一下事件委托. 所谓事件委托,就是将原本应该在当前元素绑定的事件,放到它的祖先元素上,让祖先元素来委托处理. 事件流 事件流指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流由两阶段组成: 捕获事件 冒泡事件 我们通常用 addEventListener 给元素添加事件: document.querySelector('#card')addEventListener( 'click', function (ev

  • jQuery事件与动画基础详解

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                        执行时机 click(fn)                单击鼠标 $(document).ready(function(){ $("dd>img").click(function(){ $("dt>img").show(); }); mouseov

  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); 2.  keyup();  3.  keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按

  • jQuery动态添加.active 实现导航效果代码思路详解

    jQuery动态添加.active 实现导航效果代码思路详解

     代码思路: 页面4: 页面5: 代码思路: 通过jq获取你打开页面的链接  window.location.pathname: 在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同 通过jq包含方法找到相对应的li给他加入active类名 然后..就没有然后了... jq代码: $(function () { var li = $(".title_ul").children("li"); for (var i = 0; i < li.l

  • Jquery中$.ajax()方法参数详解

    俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async:

  • jQuery AJAX timeout 超时问题详解

    先给大家分析下超时原因: 1.网络不通畅. 2.后台运行比较慢(服务器第一次运行时,容易出现) 超时结果:JQ中 timeout设置请求超时时间. 如果服务器响应时间超过了 设置的时间,则进入 ERROR (错误处理) 超时解决方案: 1.默认的timeout为0,代表永不超时 2.尽量把timeout设置的大一点.坏处:使数据的加载变慢(貌似.呵呵). 3.在ERROR回调函数中写 有关于 超时 处理 的函数:例如,可以在超时的情况下再次调用取数据函数. -------------------

  • jquery 时间戳转日期过程详解

    jquery 时间戳转日期过程详解

    这篇文章主要介绍了jquery 时间戳转日期过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 搜了一下发现这个时间戳转时间的代码很好用,附上实践的代码 结果如下 代码如下 /** * 时间戳转日期 * @param timestamp * @returns {*} */ function timestampToTime(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位

  • Vue.js 图标选择组件实践详解

    本文介绍了Vue.js 图标选择组件实践详解,分享给大家,具体如下: 背景 最近项目中在做一个自定义菜单需求,其中有一个为菜单设置小图标的功能,就是大家常见的左侧菜单 设置图标不难,方案就是字体图标,可供使用的图标库也有很多,比如阿里巴巴的 Iconfont,以及 Fontaswsome 等,问题在于如何优雅的提供几百个图标供用户选择,而不需要开发去一个一个的写标签,也不需要一个个的去找图标. 字体图标库 Fontawesome 方案 我们使用字体图标的方式,一般是一个 <i class="

  • 得物基于StarRocks的OLAP需求实践详解

    得物基于StarRocks的OLAP需求实践详解

    目录 1. 什么是 StarRocks 2. 系统架构 3. 存储架构 3.1 表的存储 4. 需求背景 案例一: 案例二: 5. 经验分享 6. 未来规划 1. 什么是 StarRocks 新一代极速全场景MPP数据库,可以用 StarRocks 来支持多种数据分析场景的极速分析: 架构简洁,采用了全面向量化引擎,并配备全新设计的 CBO 优化器,查询速度(尤其是多表关联查询): 很好地支持实时数据分析,并能实现对实时更新数据的高效查询, 还支持现代化物化视图,以进一步加速查询: 用户可以灵活

随机推荐