jQuery trigger() and triggerHandler()


Sponsored Links

73058_New Scooba® 230 Floor Washing Robot + Free Shipping!

 

jQuery trigger() and triggerHandler()

Here we take a look at jQuery's trigger() and triggerHandler() methods and their differences.

.trigger()

The jQuery .trigger() method call is used to trigger the event handler of the selected item. So if we have a click event defined such as:


<div id="clickMe">
    Click Me
</div>


<script type="text/javascript">

    $(document).ready(function () {
        $('#clickMe').bind("click", function (event) {
            $('#clickMe').after("<br />and some extra text for good measure");
        });
    });

</script>

With this click event handler defined, we can click on the div called 'clickMe' and the click event handler we assigned in the jQuery code will be called. What the .trigger() call allows us to do is call the click event handler from the code, without needing the user to click on the div which would cause the click event handler to fire.


$('#clickMe').trigger('click');

triggerHandler()

The jQuery triggerHandler() method call works in a very similar way to the .trigger() method, in that it is used to call an event hander from code, without actually needing the real event to occur (as if it were a user interface event, we couldn't rely on the user executing the event when we need to.)


$('#clickMe').triggerHandler('click');

So here, exactly as in the example for .trigger(), we are calling the click event handler of the 'clickMe' element using code. So what are the differences between .trigger() and .triggerHandler()?

Differences between .trigger() and .triggerHandler()


.triggerHandler() only affects the first element
.trigger() will affect every element in the jQuery object
.triggerHandler() triggered events won't bubble up
.trigger() triggered events will bubble up the DOM tree
.triggerHandler() returns the returned value from the last handler (undefined if no handlers triggered
.trigger() returns the jQuery object to allow chaining
.triggerHandler() prevents the default behaviour of an event to occur
.trigger() allows the default behaviour of the event to occur