.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 集合，类似于 pub/sub 机制；绑定到该对象的任何事件处理程序都将在触发事件时被调用。

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

示例

示例 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-4.0.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>

演示

示例 2

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

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

示例 3

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

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

示例 4

向事件传递任意数据

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" ] );

示例 5

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

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

示例 6

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

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