7

I'm trying to listen for a custom event but I would like to effectively 'ignore' the fact that it's namespaced or somehow listen to all namespaces without defining them individually.

$('#test').on('custom', ...);

$('#test').trigger('custom.namespace1');
$('#test').trigger('custom.namespace2');

The reason I want to be able to do this is because I have multiple ui plugins that fire events when they are hidden/shown. These events are mainly used internally but are namespaced so they don't collide with each other. However I would also just like to know when a particular ui element is hidden, independent of its source to perform other cleanup logic.

In the above example, nothing will happen because the trigger events are namespaced. Can I listen to all namespaces with something to the effect of custom.*?

Fiddle demonstrating the problem.

Thanks

Edit

Even something like this would be desirable but still can't get it to work

$('#test').on('custom.global', log);

$('#test').trigger('custom.global.namespace1');
$('#test').trigger('custom.global.namespace2');

Fiddle

1

3 Answers 3

1

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], '/');
});

Example in this fiddle

1
  • wait a minute...that's not right...needs to build each increasing chain.
    – drzaus
    Feb 21, 2013 at 2:45
0

I fear the only way would be to list them all as a first argument of on method ...

$('#test').on('custom.ns1 custom.ns2 ...', function(evt){});

Which means annoying code review when the plugin is getting updated ...

7
  • Unfortunately it seems that that is not the case, see my edit for a fiddle that demonstrates the problem. I also cannot simply use .is(':hidden') because I need to be able to listen for when elements become hidden
    – jschr
    Sep 25, 2012 at 20:19
  • 1
    May the events be caught deeper in the DOM tree, can prevented from bubbling :/ ... About the hidden part, this is not really about testing if it is "visibly hidden" :p, but catching an event that would indicate 'the widget got hidden' right ?
    – Stphane
    Sep 25, 2012 at 20:28
  • Sorry, yes this is about watching for when particular modules/widgets become hidden or shown. To be more specific I have a widget for Tooltips that I want to be able to work if they are inside a Tab or Modal. I would like to be able to know when the parent is hidden (which could be either a tab or modal) so that I can hide the tooltips as well. I will have to think about the stopPropagation method some more, it could work but is definitely not ideal. Thanks for the reply.
    – jschr
    Sep 25, 2012 at 20:35
  • @jschr Have you tried to list them all ? I mean all event.namespaces in the first argument of on method ? Cause it works !
    – Stphane
    Sep 25, 2012 at 20:50
  • This is actually what I'm trying to avoid as it would make maintain quite a pain as new types of widgets are created. I would have to make sure to add the new namespace everywhere that's watching for the hidden event.
    – jschr
    Sep 25, 2012 at 20:53
0

I just ran into this and here's my solution. Javascript is a fun language and events are just strings. Why not define your events beforehand and just dynamically add them to an "all" event? No need to worry about getting out of sync.

You could extend this however you want. When a widget is registered, have it register itself and append it to the list. Use an array and just do myEvents.join(" ") to generate all of them. On app bootstrap, do what I do below and add all keys in an object to an "all" event. Whatever you want to do is fine.

PS. The "Vent" example I use is from: https://github.com/reedspool/jquery-event-aggregator/blob/master/eventAggregator.jquery.js

var stand_in = {},
    $stan = $(stand_in),
    // Don't give Stan to anyone else, he's precious
    $empty = $(),
    trigger = function(name, ...args) {
      $stan.trigger.apply($stan, arguments);
      return $empty;
    },
    on = function(name, fn) {
      $stan.on(name, function(evt, obj) {
        // Shed the event object, who needs it?
        fn(obj);
      });

      return $empty;
    };
    
var Vent = {
  trigger: trigger,
  on: on
};
    
var events = {
  All: "",
  Custom1: "my1.event",
  Custom2: "my2.event"
}

for (var evt in events) {
	if (events.hasOwnProperty(evt) && evt !== 'All') {
    events.All += events[evt] + " ";
  }
}

Vent.on(events.Custom1, function () { alert(events.Custom1 + " trigger")});
Vent.on(events.All, function () { alert(events.All + " trigger")});

$("#btn").on('click', function () {
	Vent.trigger(events.Custom1);
});
$("#btn2").on('click', function () {
	Vent.trigger(events.Custom2);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btn">
Press Me
</button>
<button id="btn2">
Press Me 2
</button>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.