.triggerHandler()

分類： 事件 > 事件處理常式附加

.triggerHandler( eventType [, extraParameters ] )傳回： 物件

說明： 執行附加至元素的所有處理常式，以取得事件。

.triggerHandler( eventType ) 執行所有與 jQuery 繫結的事件類型處理常式。它也會執行在元素上找到的任何名為 on{eventType}() 的方法。此方法的行為類似於 .trigger()，但有以下例外

  • .triggerHandler( "event" ) 方法不會在觸發它的元素上呼叫 .event()。這表示在表單上使用 .triggerHandler( "submit" ) 呼叫不會在表單上呼叫 .submit()。
  • 雖然 .trigger() 會對 jQuery 物件比對到的所有元素執行，但 .triggerHandler() 只會影響第一個比對到的元素。
  • 使用 .triggerHandler() 觸發的事件不會在 DOM 層級中冒泡；如果它們未直接由目標元素處理，它們不會執行任何動作。
  • .triggerHandler() 不會傳回 jQuery 物件（以允許串連），而是傳回最後一個它造成執行處理常式傳回的值。如果未觸發任何處理常式，它會傳回 undefined

如需有關此方法的更多資訊，請參閱 .trigger() 的討論。

範例

如果您在焦點事件上呼叫 .triggerHandler() - 瀏覽器的預設焦點動作不會被觸發，只有繫結到焦點事件的事件處理常式會被觸發。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>triggerHandler demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button><br><br>
 
<input type="text" value="To Be Focused">
 
<script>
$( "#old" ).on( "click", function() {
  $( "input" ).trigger( "focus" );
} );
$( "#new" ).on( "click", function() {
  $( "input" ).triggerHandler( "focus" );
} );
$( "input" ).on( "focus", function() {
  $( "<span>Focused!</span>" ).appendTo( "body" ).fadeOut( 1000 );
} );
</script>
 
</body>
</html>

示範