当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .live()用法及代码示例


用法 
.live( events, handler ) => jQuery

版本已弃用：1.7，已删除：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 事件类型和为它们执行的函数的普通对象。

注意：这个 API 在 jQuery 1.9 中已经被移除；请改用 on() 。

此方法提供了一种将委托事件处理程序附加到页面的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+
});

不再推荐使用.live() 方法，因为更高版本的 jQuery 提供了更好的方法而没有其缺点。特别是，使用 .live() 会出现以下问题：

  • jQuery 在调用 .live() 方法之前尝试检索选择器指定的元素，在大型文档上可能是 time-consuming。
  • 不支持链接方法。例如，$( "a" ).find( ".offsite, .external" ).live( ... ); 是 not 有效且无法按预期工作。
  • 由于所有.live() 事件都附加在document 元素上，因此事件在处理之前会采用最长和最慢的路径。
  • 在移动 iOS(iPhone、iPad 和 iPod Touch)上click对于大多数元素，事件不会冒泡到文档正文，并且不能与.live()不应用以下解决方法之一：
    1. 使用本机可点击元素，例如 a 或 button ，因为它们都会冒泡到 document 。
    2. 使用 .on() 或 .delegate() 附加到 document.body 级别以下的元素，因为移动 iOS 确实在体内冒泡。
    3. 将 CSS 样式 cursor:pointer 应用于需要冒泡点击的元素(或包含 document.documentElement 的父元素)。但是请注意，这将禁用元素上的复制\粘贴，并使其在触摸时突出显示。
  • 在事件处理程序中调用 event.stopPropagation() 对停止附加在文档下方的事件处理程序无效；该事件已经传播到 document 。
  • .live() 方法以令人惊讶的方式与其他事件方法交互，例如，$( document ).off( "click" ) 删除通过对 .live() 的任何调用附加的所有点击处理程序！

对于仍在使用 .live() 的页面，此 version-specific 差异列表可能会有所帮助：

  • 在 jQuery 1.7 之前，要在使用 .live() 绑定后停止进一步的处理程序执行，处理程序必须返回 false 。调用 .stopPropagation() 不会完成此操作。
  • 作为jQuery 1.4 .live()方法支持自定义事件以及all JavaScript events that bubble.它还支持某些不会冒泡的事件，包括change,submit,focus和blur.
  • 在jQuery 1.3.x只能绑定以下 JavaScript 事件：click,dblclick,keydown,keypress,keyup,mousedown,mousemove,mouseout,mouseover， 和mouseup.

例子：

取消默认操作并通过返回 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" );
  }
});

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .live()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。