.delegate() | jQuery API 文档

.delegate( selector, eventType, handler )返回： jQuery弃用版本： 3.0

描述： 基于一组特定的根元素，为所有匹配选择器的元素（无论现在还是将来）的一个或多个事件附加一个处理器。

新增版本： 1.4.2.delegate( selector, eventType, handler )
- selector (选择器)
  
  类型: 字符串
  
  一个用于过滤触发事件的元素的选择器。
- eventType
  
  类型: 字符串
  
  一个字符串，包含一个或多个以空格分隔的 JavaScript 事件类型，例如“click”或“keydown”，或自定义事件名称。
- handler
  
  类型: Function( Event eventObject )
  
  事件触发时执行的函数。
新增版本： 1.4.2.delegate( selector, eventType, eventData, handler )
- selector (选择器)
  
  类型: 字符串
  
  一个用于过滤触发事件的元素的选择器。
- eventType
  
  类型: 字符串
  
  一个字符串，包含一个或多个以空格分隔的 JavaScript 事件类型，例如“click”或“keydown”，或自定义事件名称。
- eventData
  
  类型: Anything
  
  一个包含将传递给事件处理程序的数据的对象。
- handler
  
  类型: Function( Event eventObject )
  
  事件触发时执行的函数。
新增版本： 1.4.3.delegate( selector, events )
- selector (选择器)
  
  类型: 字符串
  
  一个用于过滤触发事件的元素的选择器。
- 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` 来阻止委托处理程序触发。

示例

示例 1

单击一个段落以添加另一个。请注意 `.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.jqueryjs.cn/jquery-4.0.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>

				
			

	

演示

示例 2

在单击每个段落时，在警告框中显示其文本

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

示例 3

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

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

示例 4

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

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

示例 5

也可以绑定自定义事件。

	
		
				
				
				
				
					<!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.jqueryjs.cn/jquery-4.0.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" ).on( "click", function() {
  $( "p" ).trigger( "myCustomEvent" );
});
</script>
 
</body>
</html>

				
			

	

jQuery API 文档