Is it better to limit the scope?

Question

$('#section').on('click','.target',function(){～})

this is the target in the section,so scope is limited.

$('.target').click(function(){～})

this is in dom.so it is wide scope.

Which is faster? I think the latter is fast.because ,the former,search the section from dom and next,serch the target. But the latter,only serch the target from dom.

Is this idea wrong?

You only need to use the first form if you're creating `.target` elements dynamically. — Barmar, Mar 23 '18 at 11:27
i would rather say that the difference is so small that we can ignore it. — Jonas Wilms, Mar 23 '18 at 11:27
The first one doesn't search for `.target`. It binds the event handler to `#section`, then when you click it tests whether you clicked on an element with `class="target"`. — Barmar, Mar 23 '18 at 11:28
But it means that code has to run to do this test when you click anywhere in `#section`. The second one binds the handler directly to `.target`. — Barmar, Mar 23 '18 at 11:29
You can also do `$("#section .target")` to limit the scope. The second one will run when you click on `.target` that isn't inside `#section`. — Barmar, Mar 23 '18 at 11:29
You are all forgetting that if there are 1000 elements with target-css class it will be very very inefficient to bind the click element on each of those elements. Better to bind it once and let it bubble. — Esko, Mar 23 '18 at 11:30
As pointed out the first one is not doing the same anyway, it's a delegated event, and there much better when you have lots of elements you want to bind to the same event. — Keith, Mar 23 '18 at 11:32
The first question you should ask yourself is which makes more sense in the context of what your trying to do. Any performance gain here is dependant on the circumstances. Remember [premature optimization is the root of all evil (or at least most of it) in programming.](https://en.wikiquote.org/wiki/Donald_Knuth). If this is slow **and** you identify it as a bottle neck, then optimise it, not before. Otherwise stick with the most appropriate solution to your problem. — Liam, Mar 23 '18 at 11:48
Possible duplicate of [Are there performance drawbacks to using a delegated event handler in JavaScript and jQuery?](https://stackoverflow.com/questions/30922305/are-there-performance-drawbacks-to-using-a-delegated-event-handler-in-javascript) — Liam, Mar 23 '18 at 11:51

score 2 · Accepted Answer · edited Mar 23 '18 at 11:51

Is it better to limit the scope?

In a word yes.

There are a couple of differences between the two examples that you posted

$('#section').on('click','.target',function(){～})

This will register a handler against #section that will be fired whenever a it is clicked but your handler will only be called on a .target if that was actually clicked.

$('.target').click(function(){～})

Which is equivalent to

$('.target').on('click', function(){～})

Will only be registered for .target that were in the DOM at the point that the handler was registered anywhere in the page.

From a performance perspective you should limit scope to elements that are on the page when the handler is registered. If it makes sense in your particular scenario.

$('#section .target').on('click', function(){～})

Is it better to limit the scope?

1 Answers1