.live()

.live( events, handler )返回类型:jQueryversion deprecated: 1.7, removed: 1.9

描述:把一个事件处理函数附加到年有匹配当前选择器的元素,无论是现在的元素还是未来的元素。

  • 增补版本:1.3.live( events, handler )

    • events
      类型:String
      一个字符串,包含了一个JavaScript事件类型,譬如“click”或“keydown”。自从jQuery 1.4以来,此字符串可以包含多个用空格隔开的事件类型或自定义事件名称。
    • handler
      类型:Function( Event eventObject )
      事件被触发时要执行的函数。
  • 增补版本:1.4.live( events [, data ], handler )

    • events
      类型:String
      一个字符串,包含了一个JavaScript事件类型,譬如“click”或“keydown”。自从jQuery 1.4以来,此字符串可以包含多个用空格隔开的事件类型或自定义事件名称。
    • data
      类型:PlainObject
      一个对象,包含要传递给事件处理函数的数据。
    • handler
      类型:Function( Event eventObject )
      事件被触发时要执行的函数。
  • 增补版本:1.4.3.live( events )

    • events
      类型:PlainObject
      一个或多个JavaScript事件类型以及针对它们执行的函数构成的扁平对象。

自从jQuery 1.7以来.live()方法被淘汰了。请用.on()方法来附加事件处理函数。jQuery的旧版本的用户应该使用.delegate()来引用.live()

此方法为附加委托事件处理函数到网页的document元素提供了一种方式,它简化了在动态添加到网页的内容上使用事件处理函数。请参阅.on()方法的文档,关于直接事件对比委托事件的讨论,以了解更多信息。

它的继承者重写.live()方法是很简单直接的;以下是三种事件添加方法的模板,它们是等价的:

1
2
3
$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+

events参数既可以是空格隔开的事件类型名称以及可选的命名空间列表,也可以是事件名称字符串以及处理函数构成的对象。data参数是可选的,可以省略。例如:下面三种方法调用是功能等同的(但是请看下面以了解更高效更高性能的附加委托事件处理函数的方式)。

1
2
3
4
5
6
7
8
9
$( "a.offsite" ).live( "click", function() {
alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).delegate( "a.offsite", "click", function() {
alert( "Goodbye!" ); // jQuery 1.4.3+
});
$( document ).on( "click", "a.offsite", function() {
alert( "Goodbye!" ); // jQuery 1.7+
});

不再建议使用.live()方法,因为jQuery的后来版本提供了更好的方式,没有它的缺点。特别是,使用.live()引起了以下问题:

  • 在调用.live()方法之前,jQuery会试图检索由选择器指定的元素,在大的文档上,它可能相当耗时。
  • 不支持连缀方法。例如,$( "a" ).find( ".offsite, .external" ).live( ... ); 无效的,不能如期待那样起作用。
  • 因为所有的.live()事件都附加在document元素上,在处理事件之前,事件取用了最长和最慢的可能路径。
  • 在手机iOS(iPhone、iPad和iPad触屏)上,对于大多数元素,click事件不会冒泡到document.body,因此不能使用.live()方法来处理它,除非应用下面的变通方法之一:
    1. 使用原生的可点击元素,譬如abutton,因为这两者确实会冒泡到document.
    2. 使用.on().delegate()把事件附加到document.body的级别以下的元素上,因为手机iOS确实会在body内部冒泡。
    3. 把CSS样式cursor:pointer应用到需要冒泡点击事件的元素(包括包括document.documentElement的父元素)。请注意,无论如何,这将禁用元素上的复制、粘贴,并导致它在轻触时被高亮。
  • 在事件处理函数上调用event.stopPropagation()会无效,不能阻止在文档中下层元素上附加的事件处理函数;事件已经传播到document了。
  • .live()方法与其它事件方法交互的方式,可能令人惊奇,例如,$( document ).off( "click" )会删除所有的通过调用.live()附加的点击处理函数。

对于依然使用.live()的网页,版本特有的区别的列表可能很有用:

  • 在jQuery 1.7以前,使用.live()在一次绑定之后阻止执行更多的处理函数,处理函数必须返回false。调用.stopPropagation()不会实现这一点。
  • 自从jQuery 1.4以来,.live()方法支持自定义事件,以及所有的可冒泡的JavaScript事件。它还支持并不冒泡的特定的事件,包括changesubmitfocus以及blur
  • 在jQuery 1.3.x中,只有以下的JavaScript事件可以冒泡:clickdblclickkeydownkeypresskeyupmousedownmousemovemouseoutmouseovermouseup

示例:

通过返回false来取消一个默认动作,并防止它向上冒泡。

1
2
3
$( "a" ).live( "click", function() {
return false;
});

通过使用preventDefault方法只取消默认动作。

1
2
3
$( "a" ).live( "click", function( event ) {
event.preventDefault();
});

利用.live()方法绑定自定义事件。

1
2
3
4
5
6
7
8
9
10
11
12
$( "p" ).live( "myCustomEvent", function( event, myName, myValue ) {
$( this ).text( "Hi there!" );
$( "span" )
.stop()
.css( "opacity", 1 )
.text( "myName = " + myName )
.fadeIn( 30 )
.fadeOut( 1000 );
});
$( "button" ).click(function() {
$( "p" ).trigger( "myCustomEvent" );
});

使用一个对象,绑定多个活动事件处理函数。请注意,.live()为所有的段落,甚至新的段落,调用了click、mouseover和mouseout事件处理函数。

1
2
3
4
5
6
7
8
9
10
11
$( "p" ).live({
click: function() {
$( this ).after( "<p>Another paragraph!</p>" );
},
mouseover: function() {
$( this ).addClass( "over" );
},
mouseout: function() {
$( this ).removeClass( "over" );
}
});