Different ways of event binding jquery

Question

I know that we can bind events to elements using one of the two ways:

// I know it won't work on dynamically created elements
$('.someElement').on('someEvent', function(){
    // Do some stuff.
});

Or we can also use the following:

// It'd work on dynamically created elements
$('.someParent').on('someEvent', 'someElement' , function(){
    // Do some stuff.
});

Now what I'd like to ask is, would it be a good idea, if I use the second one in my whole application? I mean if we look at the performance, second one is better than the first one, as it restricts jquery to check only in a specific region for elements to bind the events, isn't it?

Second option is [Event delegation](http://learn.jquery.com/events/event-delegation/) — Satpal, May 01 '14 at 07:08
possible duplicate of [What is DOM Event delegation?](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) — Bergi, May 01 '14 at 07:35

score 3 · Answer 1 · edited May 23 '17 at 12:05

From the DOC:

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.

So, you may need to use multiple event listener, then what would you do? Obviously the method first one.

event-delegation-vs-direct-binding

You will create less CPU overhead in binding the events using $().on(, ) since you will be binding to a single "root" element instead of potentially many more single descendant elements (each bind takes time...).

So it's up to you to decide what point is more important for performance. Do you have available CPU when you add the new elements? If so then binding directly to the new elements would be the best for overall performance however if adding the elements is a CPU intensive operation you will probably want to delegate the event binding and let the event triggering create some extra CPU overhead from all the bubbling.

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

The performance of using delegated events will not always necessarily be better than directly attaching events.

Consider the following markup:

<div id="someId">   
    <div class="someParent">
      <div class="someElement"></div>
    </div>
    <div class="someParent">
      <div class="someElement"></div>
    </div>
    <div class="someParent">
      <div class="someElement"></div>
    </div>
</div>

There'd be no point in attaching handlers to someParent, delegating someElement, as you'd be attaching the same number of handlers if you attached the handler to someElement directly:

$('div.someParent').on('click', 'div.someElement', function() {
    // given the example markup, this would be slightly slower than
    // attaching the element directly $('div.someElement').on('click', ..
    // as you are attaching the same number of handlers, but have the overhead
    // of filtering for descendents with the class `div.someElement`
});

If the markup looked like this:

<div id="someId">
    <div class="someParent">
        <div class="someElement"></div>
        <div class="someElement"></div>
        <div class="someElement"></div>
        <div class="someElement"></div>
        <div class="someElement"></div>
    </div>
    <div class="someParent">
        <div class="someElement"></div>
        <div class="someElement"></div>
        <div class="someElement"></div>
        <div class="someElement"></div>
        <div class="someElement"></div>
    </div>
    <div class="someParent">
        <div class="someElement"></div>
        <div class="someElement"></div>
        <div class="someElement"></div>
        <div class="someElement"></div>
        <div class="someElement"></div>
    </div>
</div>

.. and you delegated the handler like above, you'd be attaching 3 handlers, as opposed to 15 (if you'd attached the handler directly), which would perform better.

In either case, the best way would be to use the closest parent element with an id, so you're only attaching a single handler:

$('#someId').on('click', 'div.someElement', function() {
   // do some stuff
});

The other benefit of delegating handlers (as you already know), is that it will be triggered for dynamically added elements.

Have a look at this test on jsperf.com

score 0 · Answer 3 · edited May 23 '17 at 11:50

Refer this answered question, actual difference is on dynamically added elements, event attached to parent will be available to new children.

Both of those are valid.

The former works for dynamically added elements. You use document because you're delegating events on children of the document object, so events bubble up to the document level. It's also more convenient to select the closest parent you can (and the parent must exist on the page at load).

The latter still works, and is a preferred way to simply bind events to specific elements.

I personally don't recommend delegating through the document object, but rather the closest parent that exists on page load.

Different ways of event binding jquery

3 Answers3

Have a look at this test on jsperf.com