jQuery: bind namespaces events

Question

Is it possible to listen to ALL events of one basic event if the events are namespaces?

Example:

$elmt.bind("change", function (event) {
    console.log(event);
});
$elmt.trigger("change.namespace1");
$elmt.trigger("change.namespace2");

This only works if I bind to the full event names but this is what I don't know on this position :(

Answer 1

You can, but it's not perfect.

For example:

function eventHandler(event){
    $("#output").html($("#output").html() + "<br />" + event);
}

$elmt = $("#elmt");
$elmt.bind("change.namespace1", eventHandler);
$elmt.bind("change.namespace2", eventHandler);

$elmt.trigger("change.namespace1");
$elmt.trigger("change.namespace2");

JSFiddle is here.

You need to extract the namespace from the event and switch on that though, as both namespaces are fired for the basic "change" event which almost means you need to use "only" namespaces, or no namespaces.

I hope this helps a bit.

Answer 2

Cross-posting from Bind to all namespaces of custom jquery event

---

Try triggerAll instead of trigger:

(function($) {
    $.fn.triggerAll = function(topics, data, delimiter) {
        return this.each(function() {
            var $this = $(this), chain = [], t = '';
            delimiter = (delimiter || '.');
            // rebuild chain
            $.each(topics.split(delimiter), function(i,n) {
                t += (i == 0 ? '' : delimiter) + n;
                chain.push(t);
            });

            // append/prepend original topic?
            data = (data || []);
            data.push(topics);
            $.each(chain, function(i,t) {
                $this.trigger(t, data);
            });
        });
    };
})(jQuery);

Granted, due to how jQuery handles triggering namespacing, triggering the "root" event actually fires the namespaced versions, so to get what you expect you'd need to use another character for the delimiter, like /, and then declare your events like:

var $o = $('#whatever');
// this will be triggered for all events starting with 'root'
$o.on('root', function () { console.log(Array.prototype.slice.call(arguments, 0)); });
// some arbitrary way to fire custom events
$o.on('click', function () {
    $o.triggerAll('root/custom1/subA', ['1st', '2nd'], '/');
    $o.triggerAll('root/custom2', [3, 4, 5], '/');
});