Question

I am in the process of creating a huge web application, with a JavaScript based UI, and many events generated continuously.

To avoid bad performance due to the huge amount of the event listeners needed, I of course opted to use a single event listener which will catch all the events generated from the children elements (event bubbling).

The problem is, this application is designed in such a way that one or more modules can be loaded into the main JavaScript library I’m coding (which is responsible for controlling the UI and every other aspect of the program). Of course every module should be completely independent from each other, so you can choose which methods to load, without affecting the general functionality of the library, only adding or removing features.

Since every module can operate in different DOM elements, I need to have at least a single event listener for each module, since two modules can listen for events generated by html elements placed in different DOM branches.

http://jsfiddle.net/YRejF/2/

In this fiddle for example, the first button will let the first paragraph trigger an event, and its parent will catch it. The second button will let the second paragraph fire the event, but the div listening for the same event won’t catch it, because it’s not fired from one of its sons.

So my question is: is it possible to have a single event listener, able to listen also to events triggered from elements that are not its sons (elements placed everywhere on the page)?

I was thinking about having a js object, or a dom node, which store the data of the element which triggered the event, and the event itself, then a general event will be fired on the global event listener (no matter where it’s placed in the dom), and it will then read the data to discover which element generated which event, and act accordingly.

Any help or suggestion about better ways of achieving this?

Answer 1

jQuery has a special binder for this kind of cases: live(). It let’s all events bubble to the document and then handles them accordingly. However, if you use div or other containers for different panels etc, maybe using delegate() makes more sense. Don’t worry too much about the number of bound elements. Believe me, it will run as well with 50 binds or 10 delegates as it will with 1 live.