# .trigger()

所属分类：事件 > 绑定事件处理器 英文文档：.trigger()

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

描述: 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

- #### 添加的版本: 1.0.trigger( eventType [, extraParameters ] )

  - eventType
    类型: String
    以后包含JavaScript事件类型的字符串，比如`click` 或 `submit`。
  - extraParameters
    类型: Array, PlainObject
    传递给事件处理程序的额外数组参数。

- #### 添加的版本: 1.3.trigger( event )

  - event
    类型: Event
    一个`jQuery.Event` 对象.

当相应的事件发生时，任何通过`.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()` 模拟了事件的激活，具备合成的 event 对象，但是它并没有完美的复制自然发生的事件（naturally-occurring event）。

若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用`.triggerHandler()` 来代替。

当我们使用`.on()`方法定义一个自定义事件类型，`.trigger()`的第二个参数就有用了。例如，假设我们自定义事件的处理程序绑定到我们的元素而不是内置的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开始，可以通过一个单一的参数，而不使用一个数组。

请注意向该方法中传入的 `extraParameters` 参数与传入到 .bind() 方法中的 `eventData` 参数的区别。它们的机制都是向事件处理函数中传入信息，但是传入 `.trigger()` 中的 `extraParameters` 参数是在事件发生时传入的，而传入到 `.bind()` 中的 `eventData` 参数要求在进行事件绑定时就要事先计算好。

`.trigger()` 方法可以应用在包裹简单 JavaScript 对象的 jQuery 集合中，类似 pub/sub 机制(观察者机制)。当事件发生时，任何绑定在对象上的处理函数都会被触发。

注意: 对于这两个普通的对象和DOM对象， 如果一个触发事件名称和对象的一个属性名称相匹配， 如果事件处理程序没有调用`event.preventDefault()`，jQuery将尝试其他属性作为一个方法来调用。 如果这种行为是不希望的，使用`.triggerHandler()` 来代替。

## 例子:

#### Example: 点击 button #2 时，同时触发 button #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 |
    <!DOCTYPE html><html><head>  <style> button { margin:10px; }div { color:blue; font-weight:bold; }span { color:red; }</style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

#### Example: 若要提交第一个表单但又不想使用 submit() 函数，请尝试如下方法：

1 |
    $("form:first").trigger("submit")

#### Example: 若要提交第一个表单但又不想使用 submit() 函数，请尝试如下方法：

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

#### Example: 向事件中传入任意的数据：

1 2 3 4 5 |
    $("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"]);

#### Example: 通过 event 对象，向事件中传入任意的数据：span>

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

#### Example: 另外一种通过 event 对象传入数据的方法：

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