How are custom broadcast events implemented in JavaScript (or jQuery)?

Question

I want to implement a custom event that can be "transmitted" rather than sent for specific purposes. Only those elements that have registered as listeners for such events will receive them.

What I mean will be as follows.

Firstly, in different places in the code there would be expressions of the form

some_subscriber.on_signal( 'some_signal', some_handler ); 

I use the term signal as a shorthand for a "broadcast event." In the above expression, some_subscriber registered as a listener of one type (called "some_signal") of such signals, providing a handler for it.

Elsewhere in the code would be expressions of the form

 publisher.signal_types[ 'some_signal' ].broadcast( event_data ); 

When such requests are executed, a new event and "broadcast" are created. By this, I mean that the code that calls the broadcast method does not have direct information about the listeners for the signal it emits.

---

I implemented a sketch of this idea in this jsFiddle , mainly in order to illustrate what I described in the words above ¹ . (This, of course, is not a production class, and I'm not sure that it can be done like this.)

The key elements of this implementation are as follows. Firstly, publisher objects do not track their subscribers, which can be seen when implementing the factory method for such a publisher, as shown below:

 function make_publisher ( signal_types ) { // ... var _ , signal = {} , ping = function ( type ) { signal[ type ].broadcast( ... ); } ; signal_types.forEach( function ( type ) { signal[ type ] = $.register_signal_type( type ); } ); return { signal_types: signal_types, ping: ping }; } 

This publisher object provides only two elements: the types of signals it passes (in signal_types ), and the ping method. When its ping method ping called, the publisher responds by sending a signal:

 signal[ type ].broadcast( ... ) 

The final recipients of this broadcast are nowhere to be seen in this code.

Secondly, elsewhere in the code, subscribers are registered as listeners of these broadcast signals, for example

  $( some_selector ).on_signal( signal_type, some_handler ); 

Note. . In principle, it is impossible to illustrate the rationale for this scheme using an example that is both small and realistic. The reason for this is because the strength of this scheme is that it maintains a very weak connection between the publisher code and the subscriber code, and this is a function that is never needed in a small example. In contrast, in a small example, code that implements such a loose connection invariably occurs as unnecessarily complex. Therefore, it is important to keep in mind that this seemingly excessive complexity is a context artifact. The loose coupling is very useful in large projects. In particular, free communication through the publisher / subscriber template is one of the main features of MVC.

---

My question is: is there a better (or at least a more standard) way to achieve this effect of "broadcasting" user events?

(I'm interested in both jQuery-based answers and "pure JS").

---

^{1 An early, ill-fated version of this message was greeted with an almost universal misunderstanding and (of course) a too typical downward vote. With one exception, all of the comments I received challenged the very premise of publication, and one directly questioned my understanding of the basics of event-driven programming, etc. I hope that by presenting a working example of what I mean, at least this will not work out as incredibly as it was when I described it only in words. Fortunately, one helpful comment I received on this earlier post told me about the jQuery.Callbacks function. This is really good advice; the sketch implementation mentioned in the post is based on jQuery.Callbacks .}

Answer 1

Good.

So, I think that you can use your own dispatchEvent and addEventListener and use document once to publish and subscribe to these events. Something like:

 var myCustomEvent = new Event('someEvent'); document.dispatchEvent(myCustomEvent); ... document.addEventListener('someEvent', doSomething, false); 

To make a cross browser, you can:

 var myCustomEvent = new Event('someEvent'); document.dispatchEvent(myCustomEvent); ... if (document.addEventListener) { document.addEventListener('someEvent', doSomething, false); } else { document.attachEvent('someEvent', doSomething); } 

You can read more on the topic here and here . Hope this helps.

Answer 2

My question is: is there a better (or at least a more standard) way to achieve the effect of "broadcasting" user events?

No, there is no more standard way to publish / subscribe in Javascript. It is not directly embedded in the language or browser, and for it there are no platform standards that I know of.

You have several options (most of which you seem to know) to integrate your own system.

You can select a specific object, for example a document object or a window object or a new object that you create, and use jQuery .on() and .trigger() with this object as the central clearing house to combine publish / subscribe. You can even hide the existence of this object from your actual use by simply encoding it into several utility functions if you want.

Or, as you already know, you can use jQuery.Callbacks functionality. There even publish / sign sample code in jQuery doc .

Or you can find a third-party library offering a somewhat traditional publish / subscribe model.

Or you can create your own from scratch, which really includes storing a list of callback functions associated with a particular event, so when this event fires, you can call each callback function.