CODEWITHSUNDEEP
javascriptjqueryjquery-events
Adam Biggs
Adam Biggs

Reputation: 3663

jQuery event performance: Bind a single event on parent or individual events on each child?

I've got a div with a huge amount of child divs (around 4k-5k!). Each child has a 'mousedown' and 'mouseup' event attached to it.

Should I instead attach these events once to the parent and select the child using $(e.target)? Would there be any performance advantage, and if so why?

Upvotes: 5

Views: 6221

Answers (3)

Joseph
Joseph

Reputation: 119837

the use of jQuery's .on() already does that for you. It binds an event handler to a certain parent and detects child events. It has performance benefits over .live() and .bind() as well as direct event bind like .click() and so on because:

  • unlike .live(), which binds the event to the document, with, .on(), you are in charge of what parent to bind on.

  • .live() is bound to document which is the root of the document. events that bubble up will go farther. with .on(), you can find the nearest common parent to bind that event. the bubble will travel less - a performance benefit

  • with .on(), you only bind one handler to the parent, unlike .bind() and direct event bindings, which bind events on a per element basis - not good for a lot of elements.

  • .on() is easier to remember.

  • when getting the target, inside .on(), the "this" is always the target element. never worry about cross-browser even targets. jQuery does that for you.

so "this" in this code:

$(element).on('click','someElement',function(){
    //the value of "this" in here is the DOM element target of the event
});

Upvotes: 5

jfriend00
jfriend00

Reputation: 707228

With that many child divs, you should definitely use delegated event handling with jQuery's .on(). This will give you one event handler on the parent instead of 4000 event handlers on the children. It will also be much faster to install and initialize.

If you use the delegated form of .on(), you won't have to check e.target yourself as jQuery will do that for you.

The syntax for using .on() in this way is like this:

$('parentSelector').on('mousedown', 'child selector', function(e) {
    // code here
    // "this" will be the object that initiated the event
});

More info in the jQuery doc for .on().

Upvotes: 2

Erik Philips
Erik Philips

Reputation: 54618

I would imagine that using jquery.on() would be ideal.

$("#divWithHugeAmountsOfChildDiv").on("mousedown", 
                                      ".childCLASSEStoMouseDown", 
                                      function()
{
  alert("Booya!");
});

Where your html might look like:

<body>
  <!-- lots of other elements -->
  <div id="divWithHugeAmountsOfChildDiv">
    <!-- lots of different type of elements -->
    <div class="childCLASSEStoMouseDown">Booya?</div>
    <!-- lots of different type of elements -->
  </div>
  <!-- lots of other elements -->
</body>

Changing the jQuery selectors as needed...

The why is very well explained in the jQuery documentation for the On method.

Upvotes: 7

Related Questions