What is the different in performance and the handling of these two different jQuery statements:
Number One:
$('#selector1, #selector2, .class1').on('click', function () {
//stuff
});
Number Two:
$(document).on('click', '#selector1, #selector2, .class1', function () {
//stuff
});
I know that one does delegation and the other doesn't.
But what does that mean?
Don't both do some sort of action when you click on '#selector1, #selector2, .class1'
?
In the end, isn't it the same?
Number One will hook the click
event on the elements that exist when you execute that statement. E.g., the handler is directly hooked to the actual elements that match when you execute that call.
Number Two will hook the click
event on the document, and on receipt of any clicks, will check to see if the element that was actually clicked matches any of the given selectors, and if so will fire the handler. This is event delegation rather than a direct hookup.
So that means several things:
click
work with Number Two (because it relies on the event bubbling up the DOM to the document level).There are times when using a directly-hooked handler is better, and times when event delegation (usually using something more focussed than the document
, though) is better. Usually, the dividing line between those is a judgement call, but for example if you want to respond to clicks on table rows, you're probably better off hooking the click
event on the table
element with a tr
selector, rather than attaching the click
event of every single table row, particularly if you update the table dynamically. Whereas if you have a unique button you know exists in the DOM when you're hooking up your handler, and you want to fire a specific function when that button (but not anything else) is clicked, a direct handler probably makes more sense.
Here's an example (live copy):
HTML:
<p>Click me</p>
JavaScript:
jQuery(function($) {
$('p').on('click', function() {
display("Directly-attached handler fired. Click this paragraph and note the difference in what happens compared to when you click the 'click me' paragraph.");
});
$(document).on('click', 'p', function() {
display("Delegated handler fired.");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
Note that when you click the "click me" paragraph, you get two new paragraphs added to the document, one of them the result of the first on
call, the other the result of the second. But note that if you click either of those two new paragraphs, you only see the handler from the second on
call (the delegated one), not the first. That's because those paragraphs didn't exist when you hooked up the first handler.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With