.live()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.live()

分类:建议弃用 > 建议弃用于1.7 | 事件 > 事件处理附加物 | 已删除

返回: jQuery
弃用于:1.7,删除于:1.9

.live( events, handler )

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

加入于: 1.3
.live( events, handler )
  • events
    类型:String
    一个字符串,它包含了一个JavaScript事件对象,比如说click或者keydown。自从jQuery 1.4,该字符串可以包含多个由空格分隔的事件类型,或者自定义事件名。
  • handler
    类型:FunctionEvent eventObject )
    一个函数,在事件触发时执行它。
加入于: 1.4
.live( events [, data ], handler )
  • events
    类型:String
    一个字符串,它包含了一个JavaScript事件对象,比如说click或者keydown。自从jQuery 1.4,该字符串可以包含多个由空格分隔的事件类型,或者自定义事件名。
  • data
    类型:PlainObject
    一个对象,它包含了要传递给事件处理函数的数据。
  • handler
    类型:FunctionEvent eventObject )
    一个函数,在事件触发时执行它。
加入于: 1.4.3
.live( events )
  • events
    类型:PlainObject
    一个纯对象,由一个或多个JavaScript事件类型以及针对它们执行的函数构成。

自从jQuery 1.7,.live()方法就被建议弃用了。请使用.on()来附加事件处理函数。旧版本的jQuery的用户,必须优先使用.delegate()方法,而不是.live()方法

该方法为将委托事件处理函数附加到网页的document上提供了一种手段,当内容动态添加到网页上时,它简化了事件处理函数的用法。请阅读.on()以了解直接事件与委托事件有什么区别。

根据它的继承者重写.live()方法是很直截了当的;以下是三种附加事件的方法的模板,它们是等同的:

$( 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参数是可选的,而且可能会被省略。举个例子,下面三个方法调用是功能等同的(但是请看下面以了解更有效而且性能更好的附加委托事件处理函数的方法。)

$( "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+
});

在最近的jQuery版本中,不再推荐使用.live()方法,因为jQuery提供了更好的方法,而且没有它的缺点。特别是,使用.live()会出现以下问题:

  • jQuery在调用.live()方法之前,会试图检索用选择器指定元素,在一个大文档上,这步操作可能是一个很耗时。
  • 不支持连缀方法。举个例子,$( "a" ).find( ".offsite, .external" ).live( ... ); 是无效的,不会如所期待那样起作用。
  • 因为所有的.live()事件都附加在document元素上,所以在事件被处理之前,可能会取用最长最慢的那条路径。
  • 在手机iOS操作系统上(iPhone、iPad和触屏iPod上),对大多数元素来说,click事件不会冒泡到document.body上,因此不用下面的变通方法之一,就不能和.live()方法一起使用:
    1. 使用原生的可点击的元素,比如说链接或按钮,因为这两者都会冒泡到document
    2. 使用.on().delegate()附加到document.body的下级元素,因为手机iOS操作系统不能在body内冒泡。
    3. 向需要冒泡点击的元素(或者一个父元素,包括document.documentElement)应用CSS样式cursor:pointer。然而要注意,这会禁用元素上的复制、粘贴功能,并导致在触及它时会把它高亮。
  • 在这个事件处理函数上调用event.stopPropagation()来阻止附加到document中的低层元素上的事件处理函数,是效率很低的;因为该事件已经传播到document上了。
  • .live()方法与其它事件方法的相互影响方式是出人意料的,例如,$( document ).off( "click" )会删除所有的通过调用.live()所附加的点击处理函数。

对于依然在使用.live()的网页,下面关于该方法在不同版中的区别,可能会对您有一定帮助:

  • 在jQuery 1.7以前,用.live()绑定处理函数之后,如果想阻止进一步执行处理函数,处理函数必须返回false调用event.stopPropagation()并不能实现这。
  • 自从jQuery 1.4,.live()方法支持自定义事件,以及所有的冒泡的JavaScript事件。它还支持某些不冒泡的事件,包括changesubmitfocusblur事件。
  • 在jQuery 1.3k,只能绑定以下的JavaScript事件:clickdblclickkeydownkeypresskeyupmousedownmousemovemouseoutmouseovermouseup

示例

用返回false来取消默认行为,并防止向上它冒泡。

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

通过使用preventDefault()方法,只取消默认行为。

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

.live()绑定自定义事件。

$( "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事件处理函数——哪怕是新加入的段落文本。

$( "p" ).live({
  click: function() {
    $( this ).after( "<p>Another paragraph!</p>" );
  },
  mouseover: function() {
    $( this ).addClass( "over" );
  },
  mouseout: function() {
    $( this ).removeClass( "over" );
  }
});

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/live.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。