jQuery API

.triggerHandler()

.triggerHandler( eventType [, extraParameters] ) Returns: Object

Description: Execute all handlers attached to an element for an event.

  • version added: 1.2.triggerHandler( eventType [, extraParameters] )

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

    extraParametersAn array of additional parameters to pass along to the event handler.

The .triggerHandler() method behaves similarly to .trigger(), with the following exceptions:

  • The .triggerHandler() method does not cause the default behavior of an event to occur (such as a form submission).
  • While .trigger() will operate on all elements matched by the jQuery object, .triggerHandler() only affects the first matched element.
  • Events created with .triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.
  • Instead of returning the jQuery object (to allow chaining), .triggerHandler() returns whatever value was returned by the last handler it caused to be executed. If no handlers are triggered, it returns undefined

For more information on this method, see the discussion for .trigger().

Example:

If you called .triggerHandler() on a focus event - the browser's default focus action would not be triggered, only the event handlers bound to the focus event.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>

<input type="text" value="To Be Focused"/>
<script>

$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .triggerHandler() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .triggerHandler()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • http://kflorence.myopenid.com/ Kyle Florence

    Although it says extraParameters should be an array, passing in an object seems to work too…

    • http://www.learningjquery.com/ Karl Swedberg

      True. Consider it a hidden feature. :) ( jQuery uses $.makeArray() internally to convert it to an array before processing. )

    • mrbinky3000

      That's prob because in JavaScript, arrays are object and objects are arrays.

  • http://kflorence.myopenid.com/ Kyle Florence

    Although it says extraParameters should be an array, passing in an object seems to work too…

  • Alprema

    “method does not cause the default behavior of an event to occur ” lets you think that trigger() does so, which is not the case according to the comments on the doc of trigger()

    • http://www.learningjquery.com/ Karl Swedberg

      Well, .trigger() does so, unless you have already prevented it from doing so in some event binding with event.preventDefault() or return false or something. The exception to that rule is .trigger('click'), which won't take you to another location (you can bind a click handler to do window.location.href = 'http://example.com/&#39; for that).

  • Dennis

    The triggerHandler will not fire event binding with “live” event, in version 1.4.2

  • Matt

    Why does this method not return jQuery? Everything else does. What's the point of this method being different? I see no benefit, and I had to come here to figure out why my code broke.

    • Tenko

      If you attach a custom event to jQuery element with .bind this method is very useful to call this custom event handler. Think of it as easy way to implement dom elements callbacks. In this case you would prefer to return custom object instead of jQuery object.

  • Knowspam

    Using 1.4.1 and the triggerHandler is causing the code in the href to excecute. Is this by design? I assumed that “does not cause the default behavior” meant that the href code would not be executed. That is not the case.

    • FriendlySamaritan

      by default most browser behavior will cause click to execute whatever is in the href attribute. to avoid this just add

      // Code here:

      return false;

  • Knowspam

    Using 1.4.1 and the triggerHandler is causing the code in the href to excecute. Is this by design? I assumed that “does not cause the default behavior” meant that the href code would not be executed. That is not the case.

  • mrbinky3000

    That's prob because in JavaScript, arrays are object and objects are arrays.