jQuery .trigger() multiple events

Question

I'm writing a jQuery plugin and using .on and .trigger as my pub/sub system. However, I want to trigger multiple events in different scenarios.

Is this possible to do as one string, like the .on method?

Goal:

$this.trigger("success next etc");    // doesn't work

Current solution:

$this
    .trigger("success")
    .trigger("next")
    .trigger("etc");                  // works, triggers all three events

Any suggestions?

Solution 1

JQuery itself does not support triggering multiple events, however you could write custom extension method triggerAll

(function($) {
    $.fn.extend({
        triggerAll: function (events, params) {
            var el = this, i, evts = events.split(' ');
            for (i = 0; i < evts.length; i += 1) {
                el.trigger(evts[i], params);
            }
            return el;
        }
    });
})(jQuery);

And call it like following:

$this.triggerAll("success next etc");

Solution 2

Just in case anyone else stumbles upon this question later in life, I solved this by creating a custom jQuery function.

$.fn.triggerMultiple    =   function(list){
    return this.each(function(){
        var $this = $(this); // cache target

        $.each(list.split(" "), function(k, v){ // split string and loop through params
            $this.trigger(v); // trigger each passed param
        });
    });
};

$this.triggerMultiple("success next etc"); // triggers each event

Solution 3

What you have is fine... you can't trigger multiple events using a comma separated list. The trigger() constructor only takes an event name and optional additional parameters to pass along to the event handler.

An alterternative would be to trigger all events attached to an element, however, this may not meet your needs if you need to trigger specific events in different senarios:

$.each($this.data('events'), function(k, v) {
    $this.trigger(k);
});​

Comments

[Zach Wolf]

Haha I just wrote something similar to this! Glad to see someone else came to the same conclusion. Thanks!

[Zach Wolf]

Is there a benefit in using a for loop instead of an each loop?

[hazzik]

I think for such simple case it is more effective to use regular for-in loop instead of custom jQuery $.each which does many assumptions on arguments you are passing through. And finally it does for-in inside.

[GreenImp]

Just a note that the semi-colon after the closing bracket of triggerAll should not be there.

[mpen]

You didn't propagate the params.

[Admin]

You can add ~['succes', 'next', 'etc'].indexOf(k) && at the start of $this.trigger(k) to filter desired events.

[jlh]

@ZachWolf For-loops are massively more performant than $.each() or even Array.forEach(), because it saves the quite significant overhead of a function call on every iteration.