对jQuery中on方法委托事件的理解

关于on方法中的委托事件,官方JQ API如下:

http://api.jquery.com/on/#on-events-selector-data-handler

参考大牛阮一峰的博文:

http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html

什么时候使用委托事件:

1.对未被创建的元素添加事件监听

2.避免频繁添加或删除event handler,委托父元素来进行事件处理

使用委托事件的优点:

1.大量减少监听元素的开销

使用实例

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

使用后果,不用每个tr都进行事件绑定,只需要在tbody处进行绑定即可,委托tbody进行对tr点击的响应。

对于on的第二个参数,官方API的解释是:对触发事件元素的后代元素的过滤

个人理解:过滤之后,this变成tr,事件冒泡到tbody,然后对tr进行操作。

时间: 2024-10-23 12:38:38

对jQuery中on方法委托事件的理解的相关文章

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

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

JQuery中$.ajax()方法参数

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

论jQuery中animate方法的回调问题

今日在使用jQuery中animate方法的回调函数时,发现当回调函数内嵌animate方法时,并且将这些放在循环中时会出现:先是外部animate被执行,然后再是内部animate被执行.经过多次试验以及网上查询,发现js引擎单线程的,异步事件只能排队等候执行,而不能同时执行.而animate方法是采用计时器和延时器进行闭包而成的方法,相应的计时器和延时器是异步的,故animate方法也是异步执行的.这样就可以解释了:

JQuery中$.ajax()方法参数详解 (转)

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

“jquery中each方法和选择器”的学习笔记

<head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //alert($("div").text()); //对数组元素使用匿名函数进行逐个处理.

jQuery中attr()方法用法实例

本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元素指定属性的属性值. 代码如下: $(selector).attr(name) 参数列表: 参数 描述 name 定义要获取其值的属性名称. 实例代码: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="

jQuery中eq()方法用法

这篇文章主要介绍了jQuery中eq()方法用法,实例分析了eq()方法的功能.定义及获取匹配元素集上的相应位置索引元素的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代码如下: $(selector).eq(index) 参数列表: 参数 描述 index 定义元素在元素集中的索引,从零开始的.      如果是

jQuery中animate()方法以及$(&#39;body&#39;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

$("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html").animate({"scrollTop":top}): 只被Firefox支持,而不被chrome支持. 如果想让这段js被chrome和Firefox都支持的话,应该这样: $("html,body").animate({"scrollTop"

锋利的jQuery读书笔记---jQuery中Ajax--load方法

第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onclick="Ajax();&qu