美文网首页
bind()、.live()、.delegate()和.on()

bind()、.live()、.delegate()和.on()

作者: fb941c99409d | 来源:发表于2019-02-27 14:57 被阅读0次

bind()

$( "#members li a" ).bind( "click", function( e ) {} ); 
将类型和一个处理函数直接注册到了被选中的DOM元素中。它很好的解决了各种跨浏览器的问题。
它仍然非常简洁,但是也存在着一些性能方面的问题
优点:
    适用于各种浏览器
    连接事件处理函数非常方便快捷
    对于ID选择器,使用.bind() 方法可以很快地连接事件处理函数,而且当事件被触发时, 事件处理函数几乎是马上就被调用了
缺点:
    这样方法会将所有的事件处理函数附加到所有匹配的元素
    当操作大量匹配的元素时会有性能方面的问题
    附加操作是在前期完成的,这可能导致页面加载时存在性能问题

live()

$( "#members li a" ).live( "click", function( e ) {} );
将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素(即document)。通过将事件信息注册到document上,这个事件处理函数将允许所有冒泡到document的事件调用它(例如委托型、传播型事件)。一旦有一个事件冒泡到document元素上,Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用,如果这个事件处理函数存在的话。这个额外的工作将会在用户交互时对性能方面造成一定的影响,但是初始化注册事件的过程相当地快。
优点:
    所有的事件处理函数都只会被注册一次,而不是像bind()那样进行多次注册
    将bind()方法升级到live()方法非常方便,你仅需要将"bind"替代为"live"就可以了
    那些被动态添加到DOM的元素也将被神奇的匹配到,因为真实的事件信息是被注册到document元素上的
    你可以在文档加载完之前连接事件处理函数,这样可以帮助你更好地利用你可能没有用的时间

缺点:
    这个方法在Jquery 1.7以后的版本被弃用了,你应该在你的代码里逐步放弃使用它
    使用这个方法时链式操作没有得到正确的支持,可能会出现某些错误
    所做的匹配操作基本上没用因为它只用于在document元素上注册事件处理函数
    使用 event.stopPropogation() 方法将会没用,因为事件总是已经被委托到了document元素上
    因为所有的选择器或者事件信息都被附加到document元素上了,所以一旦有一个事件要调用某个事件处理函数,Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用,如果这个函数有的话。
    因为你所连接的事件总是被委托到document上,所如果你的DOM的层级很深的话,这会导致一定的性能问题

delegate

$( "#members" ).delegate( "li a", "click", function( e ) {} );
与事件处理函数关联的选择器和事件信息将会被附加到 $( "#members" )这个元素上。这样做比使用live()高效多了,因为live()方法总是将与事件处理函数关联的选择器和事件信息附加到document元素上。
优点:
    你可以选择将选择器或者事件信息附加到指定的元素。
    匹配操作实际上在前面并没有执行,而是用来注册到指定的元素。
    链式操作可以得到正确的支持
    Jquery仍然需要迭代这些选择器或者事件信息来匹配元素,不过因为你可以选择哪一个元素作为根元素,所以筛选的量会大幅减少
    因为这项技术使用了事件委托机制,它可以匹配到被动态地添加到DOM的元素
    你可以在文档加载完之前连接事件处理函数

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

on方法

在Jquery 1.7版本中`.bind()` , `.live()` 和`.delegate()`方法只需要使用`.on()`方法一种方式来调用它们。
当然`.unbind()` , `.die()` 和.`undelegate()`方法也一样。

bind: function( types, data, fn ) {
 return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
 return this.off( types, null, fn );
},
 
live: function( types, data, fn ) {
 jQuery( this.context ).on( types, this.selector, data, fn );
 return this;
},
die: function( types, fn ) {
 jQuery( this.context ).off( types, this.selector || "**", fn );
 return this;
},
 
delegate: function( selector, types, data, fn ) {
 return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
 return arguments.length == 1 ? 
  this.off( selector, "**" ) : 
  this.off( types, selector, fn );
}

考虑到这一点,使用`.on()`方法看起来像以下方式一样...
// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} );
 
// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );
 
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

你可能注意到了,我如何使用`.on()`方法决定了它如何调用其他方法。
你可以认为`.on()`方法被具有不同签名的方法”重载“了,而这些方法实现了不同的事件绑定的连接方式。
 `.on()`方法的出现为API带来了很多方面的一致性,并希望让事情变得不那么混乱。

优点:
*   使各种事件绑定方法一致。
*   因为在Jquery源码中`.bind()` , `.live()` 和`.delegate()`方法实际上是调用了此方法,因此简化了jQuery代码库并删除了一级重定向。
*   这种方式仍然提供了使用`.delegate()`方法的优点,并且仍然提供对`.bind()`方法的支持,如果你需要的话。

缺点:

*   给人带来了一些疑惑,因为方法的实际执行方式将根据你如何调用方法而改变。

相关文章

网友评论

      本文标题:bind()、.live()、.delegate()和.on()

      本文链接:https://www.haomeiwen.com/subject/tekfuqtx.html