- 浏览: 52599 次
- 性别:
- 来自: 北京
最新评论
-
lqwforever:
不错,支持一下
redhat linux卸载自带的Java1.4.2安装JDK6 -
liumiao2011:
keepgoing 写道java代码也可以格式化还是只能格式化 ...
让Editplus自动格式化js、css、html。。。 -
keepgoing:
java代码也可以格式化还是只能格式化HTML/CSS、js代 ...
让Editplus自动格式化js、css、html。。。
原文:The Difference Between jQuery’s .bind(), .live(), and .delegate()
作者:Steve Schwartz
时间:2011-02-01
出处:http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
.bind()、.live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及防止在交互应用中弹出错误。 首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:
当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。 $('a').bind('click', function() { alert("That tickles!") }); 因此一个单击操作会触发alert函数的执行。 基本要素
DOM树
事件冒泡(又称事件传播)
click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。
在操纵DOM的语境中,document是根节点。
现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。
.bind()
$('a').bind('click', function() { alert("That tickles!") });
这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。
.live()
$('a').live('click', function() { alert("That tickles!") });
JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。
live方法还可以被绑定到具体的元素(或“context”)而不是document上,像这样:
$('a', $('#container')[0]).live(...);
.delegate()
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论,即$('a').live() == $(document).delegate('a'),是这样吗?嗯,不,不完全是。
为什么.delegate()要比.live()好用
基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:
$('a').live('click', function() { blah() });
// 或者
$(document).delegate('a', 'click', function() { blah() });
速度
后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断,但是$()函数并未“知道”被链接的方法将会是.live()。
而另一方面,delegate方法仅需要查找并存储$(document)元素。
一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。
灵活性和链能力
live函数也挺令人费解的。想想看,它被链到$(‘a’)对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,我想说的是,以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。
仅支持CSS选择器
最后一点,live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。
欲了解更多关于CSS选择器的缺点,请参阅Exploring jQuery .live() and .die()一文。
更新:感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。
为什么选择.live()或.delegate()而不是.bind()
毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:
为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。
如果你运行了$(‘a’).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。
停止传播
最后一个我想做的提醒与事件传播有关。通常情况下,我们可以通过使用这样的事件方法来终止处理函数的执行:
$('a').bind('click', function(e) {
e.preventDefault();
// 或者
e.stopPropagation();
});
不过,当我们使用live或是delegate方法的时候,处理函数实际上并没有在运行,需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止,我们的其他的来自.bind()的处理函数早已运行了。
发表评论
-
查看ORACLE实例名和服务名的方法(AIX系统下)
2013-09-05 12:53 1014数据库命令: sqlplus "/as sysd ... -
JSP禁用缓存常用方法
2013-05-05 12:59 6341.客户端缓存要在<head>中加入类似如 ... -
安装eclipse插件:JadClipse
2013-04-23 13:28 8861.下载反编译工具jad.exe,放在eclipse使用的 ... -
eclipse的JavaWeb工程.classpath设置
2013-03-17 12:21 1198<?xml version="1.0& ... -
tomcat注册成windows服务
2012-12-07 17:28 7601.进入tomcat目标下的bin目录里,执行ser ... -
查看oracle的sid
2012-12-07 13:44 1007有时候我们在tnsnames.ora配了一个连接串,用plsq ... -
调试plsql的存储过程
2012-12-05 21:37 891先右键add debug information 再右键te ... -
如何删除火狐插件
2012-11-25 22:19 668在地址栏输入about:config ,在搜索框中搜索plug ... -
windows查看端口占用情况
2012-11-19 00:47 7821.查看所有的端口占用情况 C:\>netsta ... -
在移动窗口的过程中显示整个窗口
2012-09-09 22:21 652修改注册表[HKEY_CURRENT_USER\CONTROL ... -
删除svn信息
2012-06-07 22:17 1161一、eclipse插件删除svn信息 右键点击项 ... -
Solaris下启动Oracle步骤
2012-05-22 11:08 911先打开一个终端,如果你是以root用户登录的系统 1。 ... -
DBLINK详解
2012-05-21 11:01 9231.创建dblink语法: CREATE [PUBLI ... -
linux命令
2012-05-02 18:52 741解压缩 unzip XXX.tar/zip 注意 ... -
redhat linux卸载自带的Java1.4.2安装JDK6(rpm)
2012-05-02 18:35 1134一.jdk1.4卸载 由于redhat Enterpr ... -
[转]“Microsoft Office Word已停止工作”解决方法
2012-03-27 15:14 1091方法一、双击打开“计算机”在右上方的搜索框中输入“Nor ... -
svn插件
2012-03-26 19:35 2528在线安装(比较慢) 类似: name:subclipse ... -
[转]区分Eclipse中的两种JRE
2012-03-22 00:03 1042Eclipse用到两种JRE,一是 ... -
redhat linux卸载自带的Java1.4.2安装JDK6
2012-03-12 16:58 2895一、卸载jdk1.4 由于Redhat Enterpr ... -
让Editplus自动格式化js、css、html。。。
2012-02-19 16:13 1444本人一般用editp ...
相关推荐
在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on(),有些同学会对这四者存在一些疑虑,所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料,...
`delegate()`是介于`bind()`和`live()`之间的一个方法,它允许你在父级元素上绑定事件,而不是在整个文档上。这有助于提高性能,因为事件处理只会在指定的父元素上进行。用法如下: ```javascript $('#container'...
在讨论jQuery中的事件绑定方法时,.bind()、.live()和.delegate()是三种重要的技术。为了深入理解这些方法之间的区别和特点,首先需要对DOM事件的传播机制有所了解。在DOM事件模型中,事件传播分为捕获和冒泡两个...
`$(selector).click(function() {...})`用于为元素绑定点击事件,`.bind()`、`.live()`(此版本已废弃)、`.delegate()`等方法则支持更复杂的事件处理需求。同时,`$(document).ready()`确保在页面加载完成后执行...
在探讨jQuery中的`bind()`, `delegate()`, 和`live()`事件绑定方法的区别时,我们需要深入理解它们在处理DOM事件时的独特方式。这些方法在不同的场景下提供了灵活且高效的选择,帮助开发者创建响应式和动态的Web应用...
例如,使用`.on()`替代`.bind()`, `.delegate()`, 和`.live()`可以减少内存占用并提高性能。另外,避免全局变量的使用,以及合理地组织和合并CSS选择器,都能提升页面运行效率。 在实际应用中,jQuery广泛应用于...
其中,`$.fn.on()`方法的引入,取代了之前的`$.fn.bind()`, `$.fn.live()`, `$.fn.delegate()`,提供了一种统一且高效的方式来绑定事件。 7. **兼容性**:jQuery 1.7.2对老版本浏览器有着良好的支持,包括IE6/7/8等...
2. **事件处理**:1.7版本引入了`.on()`函数,这是一个统一的事件绑定方法,可以替代`.bind()`, `.live()`, `.delegate()`等,提供了更灵活的事件委托机制。 3. **动画改进**:新版本加强了动画效果的控制,如`....
1. **事件绑定优化**:在jQuery 1.7中,`.on()`方法替代了`.bind()`, `.live()`, 和 `.delegate()`,提供了一种统一的事件处理方式。`.on()`不仅支持直接绑定事件,还能进行事件委托,提高了代码的可维护性。 2. **...
在jQuery库中,有四种主要的方法用于绑定事件处理程序:`.bind()`, `.live()`, `.delegate()`, 和 `.one()`。这些方法各有特点,适用于不同的场景,下面我们将逐一深入探讨它们的用法和区别。 1. **.bind() 方法** ...
5. **jQuery 1.7.1**: 这个版本引入了`.on()`和`.off()`事件处理方法,取代了之前的`.bind()`, `.live()`, `.delegate()`等,使得事件处理更加灵活且高效。 6. **jQuery 1.8.3**: 在1.8.x系列中,jQuery继续优化了...
- **事件绑定的统一**:在1.7.1中,`.on()`方法取代了`.bind()`, `.live()`, 和 `.delegate()`,成为统一的事件绑定接口。`.on()`方法更强大,可以处理当前及未来的元素事件,增强了代码的灵活性。 - **新选择器**...
`on()`是jQuery 1.7引入的统一事件绑定函数,它可以替代之前的`bind()`, `live()`, `delegate()`等,提供了更灵活的事件处理方式。 jQuery的动画效果(Effects)使得网页动态化变得简单。`fadeIn()`, `fadeOut()`, ...
jQuery 1.7引入了`.on()`方法,取代了`.bind()`, `.live()`, 和 `.delegate()`,提供了更加灵活和高效的方式来绑定事件。1.83主要是一些bug修复和性能优化,确保稳定性和兼容性。 5. HTML(超文本标记语言): ...
例如,该版本引入了新的API,如`.on()`方法,它替代了之前的`.bind()`, `.live()`, 和 `.delegate()`,提供了更强大和灵活的事件处理。此外,1.7版本还对一些函数进行了优化,提高了性能,如`.data()`和`.attr()`。 ...
本文将深入探讨四个主要的事件绑定方法:bind()、live()、delegate()和on(),并通过实例来展示它们的用法,以及对比它们之间的差异。 1. **bind()** - `bind()` 是最基础的事件绑定方法,用于向匹配的元素添加一个...
本文将深入探讨jQuery中的事件代理方式,包括`live`, `delegate`和`bind`的区别与联系。 ### 事件冒泡与事件代理原理 事件冒泡是指事件从最深的节点开始,逐级向上层节点传播事件的过程。当一个元素触发事件,该...