Publish/subscribe Pattern With DOM API

Once in a while every web app developer will reach the point where he has to decide for a way how his modules are exchanging data between each other. If you are in this situation should have been stumbled upon the publish-subscribe pattern.

While we were thinking of a smart way to provide an event bus for our modules and also considered the usage of postal.js or Mediator.js we still wanted to avoid to introduce a new paradigm for messaging.

So we were wondering what’s the difference between a click event from a user and a message event from a module. Nothing! There is no library needed to provide this interaction pattern, the DOM gives you that for free. The key to this is called CustomEvent API.

We used the document object to listen and fire events.

document.addEventListener('person-ball-dropped', function(e) {
alert(e.person + ' dropped the ball.');
});

Here we listen to an event ‘person-ball-dropped’ and await the String ‘person’ as an additional value sent with the event.

var ballDroppedEvent = new CustomEvent('person-ball-dropped');
ballDroppedEvent.person = 'Damien';

document.dispatchEvent(ballDroppedEvent);

So we triggered the event on document an added some additional information about the person. Try this!

If you are already using jQuery you can keep your syntax and do exactly the same.

var $doc = $(document);

$doc.on('person-ball-dropped', function(e, data) {
alert(data.person + ' dropped the ball.');
});

$doc.trigger('person-ball-dropped', {
person: 'Damien'
});

As you can see the event handler receives a second parameter with the included data. Furthermore jQuery supports namespaced events. With namespaced events you can filter listeners and specify more detailed which events execute the handler.

var $doc = $(document);

$doc.on('person-ball-dropped.switzerland', function(e, data) {
alert(data.person + ' dropped the ball in Switzerland.');
});

$doc.on('person-ball-dropped.usa', function(e, data) {
alert(data.person + ' dropped the ball in USA.');
});

$doc.trigger('person-ball-dropped.switzerland', {
person: 'Damien'
});

So we trigger the event in the namespace switzerland and just the first handler gets executed. You can also listen to multiple namespaces (jQuery 1.3 or newer)

$doc.on('person-ball-dropped.usa.switzerland', function(e, data) {
alert(data.person + ' dropped the ball in Switzerland or USA.');
});

So the handler gets called on both namespaces. Attention: All namespaced events get called if you are triggering the event without any namespace!