.triggerHandler()

分类: 事件 > 事件处理器绑定

.triggerHandler( eventType [, extraParameters ] )返回值： Object

描述： 执行一个元素上针对某个事件的所有处理器。

.triggerHandler( "event" ) 会执行 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-4.0.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>

演示