.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对象，如果触发事件名称匹配对象上的属性名称，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.jquery.com/jquery-1.10.2.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" ).click(function() {
  update( $( "span:first" ) );
});
 
$( "button:last" ).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" )
  .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"
});