Overhead of listeners

I have a bunch of listeners coded in a single javascript file and they're pretty much active all the time on all pages. This is pretty harmless if the listeners have nothing to listen to but there will be a performance overhead.

Alternatively, I can check to see what page the user is on and only create the listener if it's the right kind of page. Aside from human error maintenance issues there will be an overhead on this too.

Has anyone delved into this and worked out which approach is best?

 

Generally, I find that adding listeners based on a selector that isn't page specific (but rather object specific related to the object you want to listen for) is the way to go.

For example, if you look at the source code of any page here, anything with the class "OverlayTrigger" has a listener to that intercepts the mouse click (usually a link) and instead fires an AJAX that gives you a page overlay (as an example, when you click on the user avatar here in this thread).

By using selectors, you will check if the object is on the page, and if it is, bind the listener, if it's not... nothing.

 

That makes sense. The method I've actually been using is to check the length of the type of object and then add the related listeners - if a exists then b and c will too, type of thing.

if ( $( "#myDiv" ).length )

Code (markup):

 

Ya that works too... internally with jQuery though it's basically the same thing.