# .trigger()

Categories: Events > Event Handler Attachment

## .trigger( eventType, extraParameters ) Returns: jQuery

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

- #### version added: 1.0.trigger( eventType, extraParameters )

  eventTypeA string containing a JavaScript event type, such as `click` or `submit`.

  extraParametersAdditional parameters to pass along to the event handler.

- #### version added: 1.3.trigger( event )

  eventA `jQuery.Event` object.

Any event handlers attached with `.bind()` or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the `.trigger()` method. A call to `.trigger()` executes the handlers in the same order they would be if the event were triggered naturally by the user:

    $('#foo').bind('click', function() {
          alert($(this).text());
        });
        $('#foo').trigger('click');

As of jQuery 1.3, `.trigger()`ed events bubble up the DOM tree; an event handler can stop the bubbling by returning `false` from the handler or calling the `.stopPropagation()` method on the event object passed into the event. Although `.trigger()` simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

To trigger handlers bound via jQuery without also triggering the native event, use `.triggerHandler()` instead.

When we define a custom event type using the `.bind()` method, the second argument to `.trigger()` can become useful. For example, suppose we have bound a handler for the `custom` event to our element instead of the built-in `click` event as we did above:

    $('#foo').bind('custom', function(event, param1, param2) {
      alert(param1 + "\n" + param2);
    });
    $('#foo').trigger('custom', ['Custom', 'Event']);

The event object is always passed as the first parameter to an event handler, but if additional parameters are specified during a `.trigger()` call, these parameters will be passed along to the handler as well. To pass more than one parameter, use an array as shown here. As of jQuery 1.6.2, a single parameter can be passed without using an array.

Note the difference between the extra parameters we're passing here and the `eventData` parameter to the .bind() method. Both are mechanisms for passing information to an event handler, but the `extraParameters` argument to `.trigger()` allows information to be determined at the time the event is triggered, while the `eventData` argument to `.bind()` requires the information to be already computed at the time the handler is bound.

### Examples:

#### Example: Clicks to button #2 also trigger a click for button #1.

    <!DOCTYPE html>
    <html>
    <head>
      <style>

    button { margin:10px; }
    div { color:blue; font-weight:bold; }
    span { color:red; }
    </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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: To submit the first form without using the submit() function, try:

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

#### Example: To submit the first form without using the submit() function, try:

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

#### Example: To pass arbitrary data to an event:

    $("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: To pass arbitrary data through an event object:

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

#### Example: Alternative way to pass data through an event object:

    $("body").trigger({
    type:"logged",
    user:"foo",
    pass:"bar"

    });