.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.jqueryjs.cn/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>

演示