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?
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?
3 Answers
Reset to default 7I 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.
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 thedocument, with,.on(), you are in charge of what parent to bind on..live()is bound todocumentwhich is the root of the document. events that bubble up will go farther. with.on(), you can find the nearest mon parent to bind that event. the bubble will travel less - a performance benefitwith
.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
});
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().