While bouncing around StackOverflow, I’ve noticed a number of people attaching events (notably click events) to the document as opposed to the elements themselves.
Example:
Given this:
<button id="myButton">CLICK ME</button>
Instead of writing this (using jQuery just for brevity):
$('#myButton').on('click', function() { ... });
They do this:
$(document).on('click', function() { ... });
And then presumably use event.target to drill down to the element that was actually clicked.
Are there any gains/advantages in capturing events at the document level instead of at the element level?
There is one advantage: If #myButton isn’t always on the page (that is, it’s inserted through AJAX or altering innerHTML or the DOM directly), then there’s no need to recreate the event listener over and over.
That said, you shouldn’t do it due to both performance and obfuscation. If this is happening on your page, at least put the event on a containing element that is always there – #content or #menu or something similar.
And even then, to address the example code in your question, jQuery in particular has syntax to do that without manual checking:
$(document).on('click', '#myButton', function() { ... });
Although, as I said above, it is better to restrict the event to where it can appear:
$('#commentBox').on('click', '#myButton', function() { ... });
Maybe (and that’s a big maybe) in some (again, a big some) cases that could (and a big could) increase performance of the app, though I can’t say why.
What it definitely does is make the code harder to read, since you’d have to go into the callback to find out what element the event is really attaching too; and also potentially violates the DRY principle, since you can’t reuse the callback in another element event. You can certainly add another clause to your event.target if statement, but that would obfuscate the code even further.
Which brings me back to my first statement, somebody must have thought he could increase performance of the app, since the only reason for obfuscating code that makes sense, is improving performance. Sadly, most people tend to attack performance issues where they think the issue is, as opposed to profiling the code and determining exactly what is underperforming.
Again, I’m not sure that this would improve performance, but I’m quite sure it needlessly obfuscates your code, and that is in itself bad, especially a couple of months after you started writing it and come back to modify it. The code will likely now have multiple events bound to document with multiple ifs (some with one clause and some with n clauses) to check when trying to debug an event.
just my 2 cents
Edit: I really can’t come up with a situation where binding an event to the document would make it perform better. Perhaps the code you’ve seen requires capturing a click anywhere in the document and executing the same code regardless of where the click originates from? it’s the only reason I find could justify doing such a thing