jQuery trigger() and triggerHandler()


InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

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


Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.