CODEWITHSUNDEEP
jqueryevent-listener
Yatrix
Yatrix

Reputation: 13795

Adding event listeners: is it best to add them at the document level or further down the tree?

If I add an event listener, should I add it at the document level or further down the document tree?

For example, say I know inputs with class="ExampleCss" are always going to be in a div with id="ExampleDiv". Should I use:

$('#ExampleDiv').on(...);

or

$(document).on(...); ?

Is there a best practice for this I should be aware of?

Thanks in advance.

Upvotes: 1

Views: 214

Answers (3)

t.niese
t.niese

Reputation: 40872

a direct event callback $(".aClass").on("click",function(){}); is directly attached to the element, so if the event occurs that callback can be directly called.

for a delegated event callback $(element).on("click",".aClass", function() {}); the event callback for the event is attached to element. At the time the event callback is attached the selector parameter is just stored, jquery does not do a search for matching elements at that time. this selector is only used at the time when the element receives the event (either directly or when the event is bubbling up the dom). then jquery does a check if element that was the origin of the event matches the selector.

because of that you should keep this selector as simple as possible. a test for .on("click", ".aClass", ...) can be done much faster then .on("click", ".foo div .bar .aClass", ...) because for the first one jQuery only needs to check if the element that was the origin of the event has the class .aClass for the second one jQuery also need to test the other conditions. thats is what is ment to be as specific as possible.

For events like click, mousedown, mouseup and other events that are fired rarely you won't notice a performance impact. for events that are called in short intervals like keypress, mousemove it is probably not the best thing to use delegates there, because there on each event jquery must do a test if the element that was the origin matches the selector. (using element as root)

An other important thing to mention is, that not all events are bubbling up the DOM. e.g. the scroll event for elements with overflow: scroll or overflow: auto are not bubbling (at least not in chrome). and other events are also known not to bubble in certain browsers or browser versions. for these events it is not possible to use delegates.

So what is the better choice, well thats not easy to answer. If you use delegates and you don't declare them at a clear place, it is sometimes hard to find out which elements have a callback. on the other hand if you have a very dynamic page where you often add or remove elements form the DOM it is often much easier to use delegates, because then you don#t need to take care that all your event callbacks that are required are attached to the newly added elements.

If you want to use direct and delegate there is also something special with the order the callbacks are called: if you do add with $(".aClass").on("click", ...) and $(document).on("click",".aClass", ...) and the user clicks on an element with .aClass first the direct attached callback are called in the order the where attached then the event is bubbling up to the next element that listens to that event, if there are delegate callbacks that match are called in the order they where attached. then the event continues bubbling up until it reaches the document.

Upvotes: 0

Caner Akdeniz
Caner Akdeniz

Reputation: 1862

It is always better to use selectors by their id s and/or class names. Beside of eliminating extra waste of time for jquery to go over all the dom, it will also eliminate the confusion, and keep your code maintainable...

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191789

It's better to use a more specific selector. When you delegate like this, jQuery has to descend down the DOM tree to find all descendants that match the delegation selector. Obviously document has the most descendants.

Using a more specific selector is also clearer and prevents possible mistakes (if you have .ExampleCss that you don't want to trigger this event).

The only downside to using the more specific selector is the possibility of having to change the ancestor of the classes that you want to delegate to later.

Upvotes: 1

Related Questions