Is it the process of doing the binding, or the having many things bound that's the primarily issue of binding more events than necessary?
The answer's probably both, but to what extent?
Also, I would assume that mouseover events are more expensive than click events, since they have to be checked for more frequently. Right?
The binding of events does take time, so if you bind say, a hundred or more events, user interaction with the browser will be 'uneventful' during the time spent binding all of those events.
The more event handlers on the page, the longer the event queue, the slower the UI.
#Juan nicely summarises event delegation in a single sentence in his answer, as an alternative to binding events to many child elements.
As far as I have noticed, the more listeners you add, the slower the UI will be. Event delegation uses less memory; instead of a listener for each child node, you have a single, smarter handler at a parent element. Less memory, less attaching and detaching handlers.
Mouseover events are not necessarily more expensive, it's not extra memory, it's just that your handler is run very often, so you need to make sure it's light code
Related
Where this is coming from
When I first learned jQuery, I normally attached events like this:
$('.my-widget a').click(function() {
$(this).toggleClass('active');
});
After learning more about selector speed and event delegation, I read in several places that "jQuery event delegation will make your code faster." So I started to write code like this:
$('.my-widget').on('click','a',function() {
$(this).toggleClass('active');
});
This was also the recommended way to replicate the behavior of the deprecated .live() event. Which is important to me since a lot of my sites dynamically add/remove widgets all the time. The above doesn't behave exactly like .live() though, since only elements added to the already existing container '.my-widget' will get the behavior. If I dynamically add another block of html after that code has ran, those elements will not get the events bound to them. Like this:
setTimeout(function() {
$('body').append('<div class="my-widget"><a>Click does nothing</a></div>');
}, 1000);
What I want to achieve:
the old behavior of .live() // meaning attaching events to not yet existent elements
the benefits of .on()
fastest performance to bind events
Simple way to manage events
I now attach all events like this:
$(document).on('click.my-widget-namespace', '.my-widget a', function() {
$(this).toggleClass('active');
});
Which seems to meet all my goals. (Yes it's slower in IE for some reason, no idea why?)
It's fast because only a single event is tied to a singular element and the secondary selector is only evaluated when the event occurs (please correct me if this is wrong here). The namespace is awesome since it makes it easier to toggle the event listener.
My Solution/Question
So I'm starting to think that jQuery events should always be bound to $(document).
Is there any reason why you would not want to do this?
Could this be considered a best practice? If not, why?
If you've read this whole thing, thank you. I appreciate any/all feedback/insights.
Assumptions:
Using jQuery that supports .on() // at least version 1.7
You want the the event to be added to dynamically added content
Readings/Examples:
http://24ways.org/2011/your-jquery-now-with-less-suck
http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
http://www.jasonbuckboyer.com/playground/speed/speed.html
http://api.jquery.com/on/
No - you should NOT bind all delegated event handlers to the document object. That is probably the worst performing scenario you could create.
First off, event delegation does not always make your code faster. In some cases, it's is advantageous and in some cases not. You should use event delegation when you actually need event delegation and when you benefit from it. Otherwise, you should bind event handlers directly to the objects where the event happens as this will generally be more efficient.
Second off, you should NOT bind all delegated events at the document level. This is exactly why .live() was deprecated because this is very inefficient when you have lots of events bound this way. For delegated event handling it is MUCH more efficient to bind them to the closest parent that is not dynamic.
Third off, not all events work or all problems can be solved with delegation. For example, if you want to intercept key events on an input control and block invalid keys from being entered into the input control, you cannot do that with delegated event handling because by the time the event bubbles up to the delegated handler, it has already been processed by the input control and it's too late to influence that behavior.
Here are times when event delegation is required or advantageous:
When the objects you are capturing events on are dynamically created/removed and you still want to capture events on them without having to explicitly rebind event handlers every time you create a new one.
When you have lots of objects that all want the exact same event handler (where lots is at least hundreds). In this case, it may be more efficient at setup time to bind one delegated event handler rather than hundreds or more direct event handlers. Note, delegated event handling is always less efficient at run-time than direct event handlers.
When you're trying to capture (at a higher level in your document) events that occur on any element in the document.
When your design is explicitly using event bubbling and stopPropagation() to solve some problem or feature in your page.
To understand this a little more, one needs to understand how jQuery delegated event handlers work. When you call something like this:
$("#myParent").on('click', 'button.actionButton', myFn);
It installs a generic jQuery event handler on the #myParent object. When a click event bubbles up to this delegated event handler, jQuery has to go through the list of delegated event handlers attached to this object and see if the originating element for the event matches any of the selectors in the delegated event handlers.
Because selectors can be fairly involved, this means that jQuery has to parse each selector and then compare it to the characteristics of the original event target to see if it matches each selector. This is not a cheap operation. It's no big deal if there is only one of them, but if you put all your selectors on the document object and there were hundreds of selectors to compare to every single bubbled event, this can seriously start to hobble event handling performance.
For this reason, you want to set up your delegated event handlers so a delegated event handler is as close to the target object as practical. This means that fewer events will bubble through each delegated event handler, thus improving the performance. Putting all delegated events on the document object is the worst possible performance because all bubbled events have to go through all delegated event handlers and get evaluated against all possible delegated event selectors. This is exactly why .live() is deprecated because this is what .live() did and it proved to be very inefficient.
So, to achieve optimized performance:
Only use delegated event handling when it actually provides a feature you need or increases performance. Don't just always use it because it's easy because when you don't actually need it. It actually performs worse at event dispatch time than direct event binding.
Attach delegated event handlers to the nearest parent to the source of the event as possible. If you are using delegated event handling because you have dynamic elements that you want to capture events for, then select the closest parent that is not itself dynamic.
Use easy-to-evaluate selectors for delegated event handlers. If you followed how delegated event handling works, you will understand that a delegated event handler has to be compared to lots of objects lots of times so picking as efficient a selector as possible or adding simple classes to your objects so simpler selectors can be used will increase the performance of delegated event handling.
Event delegation is a technique to write your handlers before the element actually exist in DOM. This method has its own disadvantages and should be used only if you have such requirements.
When should you use event delegation?
When you bind a common handler for more elements that needs same functionality. (Ex: table row hover)
In the example, if you had to bind all rows using direct bind, you would end up creating n handler for n rows in that table. By using delegation method you could end up handling all those in 1 simple handler.
When you add dynamic contents more frequently in DOM (Ex: Add/remove rows from a table)
Why you should not use event delegation?
Event delegation is slower when compared to binding the event directly to element.
It compares the target selector on every bubble it hits, the comparison will be as expensive as it is complicated.
No control over the event bubbling until it hits the element that it is bound to.
PS: Even for dynamic contents you don't have to use event delegation method if you are bind the handler after the contents get inserted into DOM. (If the dynamic content be added not frequently removed/re-added)
Apparently, event delegation is actually recommended now. at least for vanilla js.
https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/
"Web performance #
It feels like listening to every click in the document would be bad for performance, but it’s actually more performant than having a bunch of event listeners on individual items."
I'd like to add some remarks and counterarguments to jfriend00's answer. (mostly just my opinions based on my gut feeling)
No - you should NOT bind all delegated event handlers to the document
object. That is probably the worst performing scenario you could
create.
First off, event delegation does not always make your code faster. In
some cases, it's is advantageous and in some cases not. You should use
event delegation when you actually need event delegation and when you
benefit from it. Otherwise, you should bind event handlers directly to
the objects where the event happens as this will generally be more
efficient.
While it's true that performance might be slightly better if you are only going to register and event for a single element, I believe it doesn't weigh up against the scalability benefits that delegation brings. I also believe browsers are (going to be) handling this more and more efficiently, although I have no proof of this. In my opinion, event delegation is the way to go!
Second off, you should NOT bind all delegated events at the document
level. This is exactly why .live() was deprecated because this is very
inefficient when you have lots of events bound this way. For delegated
event handling it is MUCH more efficient to bind them to the closest
parent that is not dynamic.
I kind of agree on this. If you are 100% sure that an event will only happen inside a container, it makes sense to bind the event to this container, but I would still argue against binding events to the triggering element directly.
Third off, not all events work or all problems can be solved with
delegation. For example, if you want to intercept key events on an
input control and block invalid keys from being entered into the input
control, you cannot do that with delegated event handling because by
the time the event bubbles up to the delegated handler, it has already
been processed by the input control and it's too late to influence
that behavior.
This is simply not true. Please see this codePen: https://codepen.io/pwkip/pen/jObGmjq
document.addEventListener('keypress', (e) => {
e.preventDefault();
});
It illustrates how you can prevent a user from typing by registering the keypress event on the document.
Here are times when event delegation is required or advantageous:
When the objects you are capturing events on are dynamically
created/removed and you still want to capture events on them without
having to explicitly rebind event handlers every time you create a new
one. When you have lots of objects that all want the exact same event
handler (where lots is at least hundreds). In this case, it may be
more efficient at setup time to bind one delegated event handler
rather than hundreds or more direct event handlers. Note, delegated
event handling is always less efficient at run-time than direct event
handlers.
I'd like to reply with this quote from https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c
Event delegation promotes binding as few DOM event handlers as possible, since each event handler requires memory. For example, let’s say that we have an HTML unordered list we want to bind event handlers to. Instead of binding a click event handler for each list item (which may be hundreds for all we know), we bind one click handler to the parent unordered list itself.
Also, googling for performance cost of event delegation google returns more results in favor of event delegation.
When you're trying to capture (at a higher level in your document)
events that occur on any element in the document. When your design is
explicitly using event bubbling and stopPropagation() to solve some
problem or feature in your page. To understand this a little more, one
needs to understand how jQuery delegated event handlers work. When you
call something like this:
$("#myParent").on('click', 'button.actionButton', myFn); It installs a
generic jQuery event handler on the #myParent object. When a click
event bubbles up to this delegated event handler, jQuery has to go
through the list of delegated event handlers attached to this object
and see if the originating element for the event matches any of the
selectors in the delegated event handlers.
Because selectors can be fairly involved, this means that jQuery has
to parse each selector and then compare it to the characteristics of
the original event target to see if it matches each selector. This is
not a cheap operation. It's no big deal if there is only one of them,
but if you put all your selectors on the document object and there
were hundreds of selectors to compare to every single bubbled event,
this can seriously start to hobble event handling performance.
For this reason, you want to set up your delegated event handlers so a
delegated event handler is as close to the target object as practical.
This means that fewer events will bubble through each delegated event
handler, thus improving the performance. Putting all delegated events
on the document object is the worst possible performance because all
bubbled events have to go through all delegated event handlers and get
evaluated against all possible delegated event selectors. This is
exactly why .live() is deprecated because this is what .live() did and
it proved to be very inefficient.
Where is this documented? If that's true, then jQuery seems to be handling delegation in a very inefficient way, and then my counter-arguments should only be applied to vanilla JS.
Still: I would like to find an official source supporting this claim.
:: EDIT ::
Seems like jQuery is indeed doing event bubbling in a very inefficient way (because they support IE8)
https://api.jquery.com/on/#event-performance
So most of my arguments here only hold true for vanilla JS and modern browsers.
I have a page with some 30+ event handlers.
Similar to this:
$section.on("click", "a.unselect-all", function () {
var $s = $(this).siblings("select");
$s.find("option").removeAttr("selected");
$s.val("");
});
The page itself is not all that large.
But I feel that it's response time has become more sluggish with more event handlers.
First off, here's a similar question/answer with some pertinent info to understanding this issue: Should all jquery events be bound to $(document)?.
Here are some notes on large numbers of event handlers and performance:
30+ is NOT a large number of event handlers. In most cases, you shouldn't have to worry about 30+ event handlers at all (see possible exception below if you have nasty selectors).
If event handlers are attached directly to the intended object (the most efficient way for them to be processed at the actual event time), you will maximize your run-time performance.
If you are using delegated event handling, then event handlers should be placed on a parent that is as close as possible to the actual object receiving the event. Putting all delegated event handlers on a top level object like document or document.body is generally a bad idea because that makes the code have to look at more selectors for every event than if the event handlers are closer to the actual object that triggers the event thus avoiding evaluating most of the selectors for most events.
If you are using delegated event handling, then the performance of the secondary selector (the 2nd argument to .on()) is important. If this is a complicated selector that is not fast to evaluate and you have a lot of these all attached to the same object for the same event, you could start to see some performance degradation. How much performance degradation will depend upon the exact circumstances.
So, the worst case is if you have a lot of delegated event handlers all attached to the same object that all have a complicated secondary selector. This is the worst case because the event will have to bubble up to this parent object and then jQuery will have to go through every one of the delegated events for this particular event and it will have to evaluate the secondary selector argument to see if it matches the target object. If you have a lot of these delegated event handlers on the same object and you the secondary selector is somewhat complicated, it's possible that the time to process all this could start to be noticeable.
As with any performance issue, if this is really important to you, then you need to do your own performance testing. Install 30 delegated 'click' handlers with secondary selectors like you will be using to the document object in a sample page and try it. See if you can see any performance degradation at all between the click and the response to the click. Try it with 100 event handlers, 1000 event handlers, etc... until you see where it becomes noticeable.
Im working on a small adminarea for a webpage.
Does it make sense to unbind events for increasing performance(client)? Or does it cost more performance to unbind events and binding it 30Seconds later again?
My questions:
Is the idea behind bind()-unbind() or on().off() just increasing clientbased performance or should i use it for other scenarios? This question comes because my javascript code is growing and growing (about 30%) because of unbinding events. And i think, that some things may not work, when user interacts not, as i want...
.
EDIT: The most times im binding/unbinding keypress events, because i need the arrow keys for diff. scenarios.
Unbinding only to bind again for performance reasons is probably bug-prone and makes things overly complicated in most cases.
Instead of binding event listeners on many specific DOM elements, you could take a more "birds eye" approach and bind just a few listeners near the top of the DOM tree, and then when the event is triggered check what was actually clicked.
That way you won't spend CPU on binding/unbinding lots of event listeners, but instead take a small CPU hit when an event is processed (which is usually not noticeable).
This is covered in detail here: event delegation vs direct binding when adding complex elements to a page
If you try to bind and unbind you are creating race conditions for the garbage collector to actually come in and clean up your code. It is best to bind once and not have to bind again.
If your client side is expected to run for long periods of time (weeks, months) then you should look into memory management and memory leaks as more of a concern for performance.
Binding-unbinding (if not done correctly) may produce memory leaks which are hard to find. If you are using webkit, take heap snapshots of your performance with unbinding versus binding once and then you can make the best decision.
Here's a link:
http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/
One solution to avoid having to worry about this, especially if you deal with constantly changing elements or large quantities, is to register your event with the body and then specify a selector argument.
Like this:
$("body").on("click", ".my-actual-element", function(aEvent) {
// Event handler code goes here.
});
See more here $.on().
Where this is coming from
When I first learned jQuery, I normally attached events like this:
$('.my-widget a').click(function() {
$(this).toggleClass('active');
});
After learning more about selector speed and event delegation, I read in several places that "jQuery event delegation will make your code faster." So I started to write code like this:
$('.my-widget').on('click','a',function() {
$(this).toggleClass('active');
});
This was also the recommended way to replicate the behavior of the deprecated .live() event. Which is important to me since a lot of my sites dynamically add/remove widgets all the time. The above doesn't behave exactly like .live() though, since only elements added to the already existing container '.my-widget' will get the behavior. If I dynamically add another block of html after that code has ran, those elements will not get the events bound to them. Like this:
setTimeout(function() {
$('body').append('<div class="my-widget"><a>Click does nothing</a></div>');
}, 1000);
What I want to achieve:
the old behavior of .live() // meaning attaching events to not yet existent elements
the benefits of .on()
fastest performance to bind events
Simple way to manage events
I now attach all events like this:
$(document).on('click.my-widget-namespace', '.my-widget a', function() {
$(this).toggleClass('active');
});
Which seems to meet all my goals. (Yes it's slower in IE for some reason, no idea why?)
It's fast because only a single event is tied to a singular element and the secondary selector is only evaluated when the event occurs (please correct me if this is wrong here). The namespace is awesome since it makes it easier to toggle the event listener.
My Solution/Question
So I'm starting to think that jQuery events should always be bound to $(document).
Is there any reason why you would not want to do this?
Could this be considered a best practice? If not, why?
If you've read this whole thing, thank you. I appreciate any/all feedback/insights.
Assumptions:
Using jQuery that supports .on() // at least version 1.7
You want the the event to be added to dynamically added content
Readings/Examples:
http://24ways.org/2011/your-jquery-now-with-less-suck
http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
http://www.jasonbuckboyer.com/playground/speed/speed.html
http://api.jquery.com/on/
No - you should NOT bind all delegated event handlers to the document object. That is probably the worst performing scenario you could create.
First off, event delegation does not always make your code faster. In some cases, it's is advantageous and in some cases not. You should use event delegation when you actually need event delegation and when you benefit from it. Otherwise, you should bind event handlers directly to the objects where the event happens as this will generally be more efficient.
Second off, you should NOT bind all delegated events at the document level. This is exactly why .live() was deprecated because this is very inefficient when you have lots of events bound this way. For delegated event handling it is MUCH more efficient to bind them to the closest parent that is not dynamic.
Third off, not all events work or all problems can be solved with delegation. For example, if you want to intercept key events on an input control and block invalid keys from being entered into the input control, you cannot do that with delegated event handling because by the time the event bubbles up to the delegated handler, it has already been processed by the input control and it's too late to influence that behavior.
Here are times when event delegation is required or advantageous:
When the objects you are capturing events on are dynamically created/removed and you still want to capture events on them without having to explicitly rebind event handlers every time you create a new one.
When you have lots of objects that all want the exact same event handler (where lots is at least hundreds). In this case, it may be more efficient at setup time to bind one delegated event handler rather than hundreds or more direct event handlers. Note, delegated event handling is always less efficient at run-time than direct event handlers.
When you're trying to capture (at a higher level in your document) events that occur on any element in the document.
When your design is explicitly using event bubbling and stopPropagation() to solve some problem or feature in your page.
To understand this a little more, one needs to understand how jQuery delegated event handlers work. When you call something like this:
$("#myParent").on('click', 'button.actionButton', myFn);
It installs a generic jQuery event handler on the #myParent object. When a click event bubbles up to this delegated event handler, jQuery has to go through the list of delegated event handlers attached to this object and see if the originating element for the event matches any of the selectors in the delegated event handlers.
Because selectors can be fairly involved, this means that jQuery has to parse each selector and then compare it to the characteristics of the original event target to see if it matches each selector. This is not a cheap operation. It's no big deal if there is only one of them, but if you put all your selectors on the document object and there were hundreds of selectors to compare to every single bubbled event, this can seriously start to hobble event handling performance.
For this reason, you want to set up your delegated event handlers so a delegated event handler is as close to the target object as practical. This means that fewer events will bubble through each delegated event handler, thus improving the performance. Putting all delegated events on the document object is the worst possible performance because all bubbled events have to go through all delegated event handlers and get evaluated against all possible delegated event selectors. This is exactly why .live() is deprecated because this is what .live() did and it proved to be very inefficient.
So, to achieve optimized performance:
Only use delegated event handling when it actually provides a feature you need or increases performance. Don't just always use it because it's easy because when you don't actually need it. It actually performs worse at event dispatch time than direct event binding.
Attach delegated event handlers to the nearest parent to the source of the event as possible. If you are using delegated event handling because you have dynamic elements that you want to capture events for, then select the closest parent that is not itself dynamic.
Use easy-to-evaluate selectors for delegated event handlers. If you followed how delegated event handling works, you will understand that a delegated event handler has to be compared to lots of objects lots of times so picking as efficient a selector as possible or adding simple classes to your objects so simpler selectors can be used will increase the performance of delegated event handling.
Event delegation is a technique to write your handlers before the element actually exist in DOM. This method has its own disadvantages and should be used only if you have such requirements.
When should you use event delegation?
When you bind a common handler for more elements that needs same functionality. (Ex: table row hover)
In the example, if you had to bind all rows using direct bind, you would end up creating n handler for n rows in that table. By using delegation method you could end up handling all those in 1 simple handler.
When you add dynamic contents more frequently in DOM (Ex: Add/remove rows from a table)
Why you should not use event delegation?
Event delegation is slower when compared to binding the event directly to element.
It compares the target selector on every bubble it hits, the comparison will be as expensive as it is complicated.
No control over the event bubbling until it hits the element that it is bound to.
PS: Even for dynamic contents you don't have to use event delegation method if you are bind the handler after the contents get inserted into DOM. (If the dynamic content be added not frequently removed/re-added)
Apparently, event delegation is actually recommended now. at least for vanilla js.
https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/
"Web performance #
It feels like listening to every click in the document would be bad for performance, but it’s actually more performant than having a bunch of event listeners on individual items."
I'd like to add some remarks and counterarguments to jfriend00's answer. (mostly just my opinions based on my gut feeling)
No - you should NOT bind all delegated event handlers to the document
object. That is probably the worst performing scenario you could
create.
First off, event delegation does not always make your code faster. In
some cases, it's is advantageous and in some cases not. You should use
event delegation when you actually need event delegation and when you
benefit from it. Otherwise, you should bind event handlers directly to
the objects where the event happens as this will generally be more
efficient.
While it's true that performance might be slightly better if you are only going to register and event for a single element, I believe it doesn't weigh up against the scalability benefits that delegation brings. I also believe browsers are (going to be) handling this more and more efficiently, although I have no proof of this. In my opinion, event delegation is the way to go!
Second off, you should NOT bind all delegated events at the document
level. This is exactly why .live() was deprecated because this is very
inefficient when you have lots of events bound this way. For delegated
event handling it is MUCH more efficient to bind them to the closest
parent that is not dynamic.
I kind of agree on this. If you are 100% sure that an event will only happen inside a container, it makes sense to bind the event to this container, but I would still argue against binding events to the triggering element directly.
Third off, not all events work or all problems can be solved with
delegation. For example, if you want to intercept key events on an
input control and block invalid keys from being entered into the input
control, you cannot do that with delegated event handling because by
the time the event bubbles up to the delegated handler, it has already
been processed by the input control and it's too late to influence
that behavior.
This is simply not true. Please see this codePen: https://codepen.io/pwkip/pen/jObGmjq
document.addEventListener('keypress', (e) => {
e.preventDefault();
});
It illustrates how you can prevent a user from typing by registering the keypress event on the document.
Here are times when event delegation is required or advantageous:
When the objects you are capturing events on are dynamically
created/removed and you still want to capture events on them without
having to explicitly rebind event handlers every time you create a new
one. When you have lots of objects that all want the exact same event
handler (where lots is at least hundreds). In this case, it may be
more efficient at setup time to bind one delegated event handler
rather than hundreds or more direct event handlers. Note, delegated
event handling is always less efficient at run-time than direct event
handlers.
I'd like to reply with this quote from https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c
Event delegation promotes binding as few DOM event handlers as possible, since each event handler requires memory. For example, let’s say that we have an HTML unordered list we want to bind event handlers to. Instead of binding a click event handler for each list item (which may be hundreds for all we know), we bind one click handler to the parent unordered list itself.
Also, googling for performance cost of event delegation google returns more results in favor of event delegation.
When you're trying to capture (at a higher level in your document)
events that occur on any element in the document. When your design is
explicitly using event bubbling and stopPropagation() to solve some
problem or feature in your page. To understand this a little more, one
needs to understand how jQuery delegated event handlers work. When you
call something like this:
$("#myParent").on('click', 'button.actionButton', myFn); It installs a
generic jQuery event handler on the #myParent object. When a click
event bubbles up to this delegated event handler, jQuery has to go
through the list of delegated event handlers attached to this object
and see if the originating element for the event matches any of the
selectors in the delegated event handlers.
Because selectors can be fairly involved, this means that jQuery has
to parse each selector and then compare it to the characteristics of
the original event target to see if it matches each selector. This is
not a cheap operation. It's no big deal if there is only one of them,
but if you put all your selectors on the document object and there
were hundreds of selectors to compare to every single bubbled event,
this can seriously start to hobble event handling performance.
For this reason, you want to set up your delegated event handlers so a
delegated event handler is as close to the target object as practical.
This means that fewer events will bubble through each delegated event
handler, thus improving the performance. Putting all delegated events
on the document object is the worst possible performance because all
bubbled events have to go through all delegated event handlers and get
evaluated against all possible delegated event selectors. This is
exactly why .live() is deprecated because this is what .live() did and
it proved to be very inefficient.
Where is this documented? If that's true, then jQuery seems to be handling delegation in a very inefficient way, and then my counter-arguments should only be applied to vanilla JS.
Still: I would like to find an official source supporting this claim.
:: EDIT ::
Seems like jQuery is indeed doing event bubbling in a very inefficient way (because they support IE8)
https://api.jquery.com/on/#event-performance
So most of my arguments here only hold true for vanilla JS and modern browsers.
By now most folks on this site are probably aware that:
$("#someTable TD.foo").click(function(){
$(e.target).doSomething();
});
is going to perform much worse than:
$("#someTable").click(function(){
if (!$(e.target).is("TD.foo")) return;
$(e.target).doSomething();
});
Now how much worse will of course depend on how many TDs your table has, but this general principle should apply as long as you have at least a few TDs. (NOTE: Of course the smart thing would be to use jQuery delegate instead of the above, but I was just trying to make an example with an obvious differentiation).
Anyhow, I explained this principle to a co-worker, and their response was "Well, for site-wide components (e.g. a date-picking INPUT) why stop there? Why not just bind one handler for each type of component to the BODY itself?" I didn't have a good answer.
Obviously using the delegation strategy means rethinking how you block events, so that's one downside. Also, you hypothetically could have a page where you have a "TD.foo" that shouldn't have an event hooked up to it. But, if you understand and are willing to work around the event bubbling change, and if you enforce a policy of "if you put .foo on a TD, it's ALWAYS going to get the event hooked up", neither of these seems like a big deal.
I feel like I must be missing something though, so my question is: is there any other downside to just delegating all events for all site-wide components to the BODY (as opposed to binding them directly to the HTML elements involved, or delegating them to a non-BODY parent element)?
What you're missing is there are different elements of the performance.
Your first example performs worse when setting up the click handler, but performs better when the actual event is triggered.
Your second example performs better when setting up the click handler, but performs significantly worse when the actual event is triggered.
If all events were put on a top level object (like the document), then you'd have an enormous list of selectors to check on every event in order to find which handler function it goes with. This very issue is why jQuery deprecated the .live() method because it looks for all events on the document object and when there were lots of .live() event handlers registered, performance of each event was bad because it had to compare every event to lots and lots of selectors to find the appropriate event handler for that event. For large scale work, it's much, much more efficient to bind the event as close to the actual object that triggered the event. If the object isn't dynamic, then bind the event right to the object that will trigger it. This might cost a tiny bit more CPU when you first bind the event, but the actual event triggering will be fast and will scale.
jQuery's .on() and .delegate() can be used for this, but it is recommended that you find to an ancestor object that is as close as possible to the triggering object. This prevents a buildup of lots of dynamic events on one top level object and prevents the performance degradation for event handling.
In your example above, it's perfectly reasonable to do:
$("#someTable").on('click', "td.foo", function(e) {
$(e.target).doSomething();
});
That would give you one compact representation of a click handler for all rows and it would continue to work even as you added/removed rows.
But, this would not make as much sense:
$(document).on('click', "#someTable td.foo", function(e) {
$(e.target).doSomething();
});
because this would be mixing the table events in with all other top level events in the page when there is no real need to do that. You are only asking for performance issues in the event handling without any benefit of handling the events there.
So, I think the short answer to your question is that handling all events in one top level place leads to performance issues when the event is triggered as the code has to sort out which handler should get the event when there are a lot of events being handled in the same place. Handling the events as close to the generating object as practical makes the event handling more efficient.
If you were doing it in plain JavaScript, the impact of random clicks anywhere on the page triggering events is almost zero. However in jQuery the consequence could be much greater due to the amount of raw JS commands that it has to run to produce the same effect.
Personally, I find that a little delegation is good, but too much of it will start causing more problems than it solves.
If you remove a node, the corresponding listeners are not removed automatically.
Some events just don't bubble
Different libraries may break the system by stopping event propagation (guess you mentioned that one)