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

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


用法 
.delegate( selector, eventType, handler ) => jQuery

不推荐使用的版本：3.0

说明：基于一组特定的根元素，为现在或将来匹配选择器的所有元素附加一个处理程序到一个或多个事件。

  • 添加的版本：1.4.2.delegate( selector, eventType, handler )

    • selector
      类型：String
      用于过滤触发事件的元素的选择器。
    • eventType
      类型：String
      包含一个或多个以空格分隔的 JavaScript 事件类型的字符串，例如 "click" 或 "keydown," 或自定义事件名称。
    • handler
      类型：Function(Event eventObject)
      触发事件时执行的函数。

  • 添加的版本：1.4.2.delegate( selector, eventType, eventData, handler )

    • selector
      类型：String
      用于过滤触发事件的元素的选择器。
    • eventType
      类型：String
      包含一个或多个以空格分隔的 JavaScript 事件类型的字符串，例如 "click" 或 "keydown," 或自定义事件名称。
    • eventData
      类型：Anything
      包含将传递给事件处理程序的数据的对象。
    • handler
      类型：Function(Event eventObject)
      触发事件时执行的函数。

  • 添加的版本：1.4.3.delegate( selector, events )

    • selector
      类型：String
      用于过滤触发事件的元素的选择器。
    • events
      类型：PlainObject
      一个或多个事件类型的普通对象和为它们执行的函数。

从 jQuery 3.0 开始，.delegate() 已被弃用。自 jQuery 1.7 起，它被 .on() 方法取代，因此不鼓励使用它。然而，对于早期版本，它仍然是使用事件委托的最有效方法。 .on() 方法中提供了有关事件绑定和委托的更多信息。通常，这些是两种方法的等效模板：

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

例如，以下 .delegate() 代码：

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

等效于使用 .on() 编写的以下代码：

$( "table" ).on( "click", "td", function() {
  $( this ).toggleClass( "chosen" );
});

要删除使用 delegate() 附加的事件，请参阅 .undelegate() 方法。

传递和处理事件数据的方式与 .on() 相同。

其他注意事项：

  • 由于 .live() 方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。同样，由.delegate() 处理的事件将传播到它们被委托的元素；在调用委托的事件处理程序时，绑定在 DOM 树中它下面的任何元素上的事件处理程序将已经被执行。因此，这些处理程序可能会阻止委托处理程序通过调用 event.stopPropagation() 或返回 false 来触发。

例子：

单击一个段落以添加另一个段落。请注意， .delegate() 将单击事件处理程序附加到所有段落 - 甚至是新段落。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
    background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Click me!</p>
 
<span></span>
 
<script>
$( "body" ).delegate( "p", "click", function() {
  $( this ).after( "<p>Another paragraph!</p>" );
});
</script>
 
</body>
</html>

演示：

要在每次单击时在警报框中显示每个段落的文本：

$( "body" ).delegate( "p", "click", function() {
  alert( $( this ).text() );
});

要取消默认操作并防止其冒泡，请返回 false：

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

使用 preventDefault 方法仅取消默认操作。

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

也可以绑定自定义事件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
 
<script>
$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});
</script>
 
</body>
</html>

演示：

相关用法


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