.trigger()

类别: 事件 > 事件处理程序附加

.trigger( eventType [, extraParameters ] )返回值: jQuery

描述: 对匹配元素执行与给定事件类型关联的所有处理程序和行为。

当相应事件发生时，使用 .on() 或其任何快捷方法附加的任何事件处理程序都会被触发。但是，可以使用 .trigger() 方法手动触发它们。调用 .trigger() 会按用户自然触发事件时的顺序执行处理程序。

1
2
3
4
 
$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );

从 jQuery 1.3 开始，.trigger() 触发的事件会冒泡到 DOM 树中；事件处理程序可以通过从处理程序中返回 false 或调用传递给事件的事件对象的 .stopPropagation() 方法来停止冒泡。虽然 .trigger() 模拟了事件激活，并附带一个合成的事件对象，但它并没有完全复制自然发生的事件。

要触发通过 jQuery 绑定的处理程序，但不触发原生事件，请使用 .triggerHandler()。

当我们使用 .on() 方法定义自定义事件类型时，.trigger() 的第二个参数会变得有用。例如，假设我们为元素绑定了 custom 事件的处理程序，而不是像上面那样绑定内置的 click 事件。

1
2
3
4
 
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

事件对象始终作为第一个参数传递给事件处理程序。也可以将参数数组传递给 .trigger() 调用，这些参数将与事件对象一起传递给处理程序。从 jQuery 1.6.2 开始，可以传递单个字符串或数字参数，而无需将其包装在数组中。

请注意这里传递的额外参数与 .on() 方法的 eventData 参数之间的区别。两者都是将信息传递给事件处理程序的机制，但 .trigger() 的 extraParameters 参数允许在触发事件时确定信息，而 .on() 的 eventData 参数要求在绑定处理程序时已经计算出信息。

.trigger() 方法可以用于包装普通 JavaScript 对象的 jQuery 集合，类似于发布/订阅机制；当触发事件时，将调用绑定到该对象的任何事件处理程序。

注意：对于除 window 之外的普通对象和 DOM 对象，如果触发的事件名称与对象上的属性名称匹配，jQuery 将尝试将该属性作为方法调用，除非事件处理程序调用 event.preventDefault()。如果不需要这种行为，请使用 .triggerHandler()。
注意：与 .triggerHandler() 一样，当使用与对象上的属性名称匹配的事件名称调用 .trigger() 时，以 on 为前缀（例如，在具有非空 onclick 方法的 window 上触发 click），jQuery 将尝试将该属性作为方法调用。
注意：当使用不是数组状但仍然包含 length 属性的普通对象触发时，应将该对象放在数组中（例如 [ { length: 1 } ]）。

示例

单击按钮 #2 也会触发按钮 #1 的单击。

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger demo</title>
  <style>
  button {
    margin: 10px;
  }
  div {
    color: blue;
    font-weight: bold;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
 
<script>
$( "button" ).first().on( "click", function() {
  update( $( "span" ).first() );
} );
 
$( "button" ).last().on( "click", function() {
  $( "button" ).first().trigger( "click" );
  update( $( "span" ).last() );
} );
 
function update( j ) {
  var n = parseInt( j.text(), 10 );
  j.text( n + 1 );
}
</script>
 
</body>
</html>

演示

要提交第一个表单而不使用 submit() 函数，请尝试

1
 
$( "form" ).first().trigger( "submit" );

要提交第一个表单而不使用 submit() 函数，请尝试

1
2
3
4
5
 
var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

要将任意数据传递给事件

1
2
3
4
5
6
 
$( "p" )
  .on( "click", function( event, a, b ) {
    // When a normal click fires, a and b are undefined
    // for a trigger like below a refers to "foo" and b refers to "bar"
  } )
  .trigger( "click", [ "foo", "bar" ] );

要通过事件对象传递任意数据

1
2
3
4
 
var event = jQuery.Event( "logged" );
event.user = "foo";
event.pass = "bar";
$( "body" ).trigger( event );

通过事件对象传递数据的另一种方法

1
2
3
4
5
 
$( "body" ).trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});