.delegate() | jQuery API 文件

.delegate( selector, eventType, handler )傳回：jQuery已棄用版本：3.0

說明：根據特定根元素集合，為所有與選取器相符的元素附加一個或多個事件處理常式，無論現在或未來。

已加入版本：1.4.2.delegate( selector, eventType, handler )
- selector
  
  類型：字串
  
  一個選取器，用於篩選觸發事件的元素。
- eventType
  
  類型：字串
  
  一個包含一個或多個以空白分隔的 JavaScript 事件類型（例如「click」或「keydown」）或自訂事件名稱的字串。
- handler
  
  類型：函式( 事件 eventObject )
  
  一個在觸發事件時執行的函式。
版本新增：1.4.2.delegate( selector, eventType, eventData, handler )
- selector
  
  類型：字串
  
  一個選取器，用於篩選觸發事件的元素。
- eventType
  
  類型：字串
  
  一個包含一個或多個以空白分隔的 JavaScript 事件類型（例如「click」或「keydown」）或自訂事件名稱的字串。
- eventData
  
  類型：Anything
  
  包含將傳遞至事件處理常式的資料的物件。
- handler
  
  類型：函式( 事件 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 來防止委派處理常式觸發。

範例

按一下段落以新增另一個段落。請注意，.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.7.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.7.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 文件

.delegate( selector, eventType, handler )傳回：jQuery已棄用版本：3.0

已加入版本：1.4.2.delegate( selector, eventType, handler )

版本新增：1.4.2.delegate( selector, eventType, eventData, handler )

版本新增：1.4.3.delegate( selector, events )

其他注意事項

示範

示範