Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

2020-05-16 18:40:45易采站长站整理

因为你所连接的事件总是被委托到document上,所如果你的DOM的层级很深的话,这会导致一定的性能问题

使用Delegate方法

.delegate()
方法与
live()
方式实现方式相类似,它不是将选择器或者事件信息附加到document,而是让你指定附加的元素。就像是live()方法一样,这个方法使用事件委托来正确地工作。

如果你跳过了前面关于

.live() 
方法的介绍,你可能要回去重新看看它,因为这里涉及到之前我所阐述的一些内部逻辑


/* .delegate() 方法会将选择器和事件信息 ( "li a" & "click" ) 附加到你指定的元素上 ( "#members" )。
*/

$( "#members" ).delegate( "li a", "click", function( e ) {} );

.delegate()
方法十分强大。在上面这个例子中,与事件处理函数关联的选择器和事件信息将会被附加到( #members” )这个元素上。这样做比使用
live()
高效多了,因为
live()
方法总是将与事件处理函数关联的选择器和事件信息附加到document元素上。另外,使用
.delegate()
方法解决许多其他问题。请参阅下方列出的详细信息。

优点:

你可以选择将选择器或者事件信息附加到指定的元素。
匹配操作实际上在前面并没有执行,而是用来注册到指定的元素。
链式操作可以得到正确的支持
Jquery仍然需要迭代这些选择器或者事件信息来匹配元素,不过因为你可以选择哪一个元素作为根元素,所以筛选的量会大幅减少
因为这项技术使用了事件委托机制,它可以匹配到被动态地添加到DOM的元素
你可以在文档加载完之前连接事件处理函数

缺点:

.bind()
方法不可以直接升级到
.delegate()
方法
Jquery仍然需要使用marchesSelector方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用。然而,附加到指定根元素的元数据会比使用
live()
方法的时候要小得多。
当操作大量匹配的元素时会有性能方面的问题
附加操作是在前期完成的,这可能导致页面加载时存在性能问题

使用On方法

你知道吗,在Jquery 1.7版本中

.bind() 
.live() 
.delegate()