當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


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()。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。