Event delegation vs direct binding when adding complex elements to a page

by

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

That being said, you will incur more CPU overhead when the actual events occur as they have to bubble up the DOM to the “root” element.

Short-story: delegate saves CPU when binding event handlers; bind saves CPU when events trigger (e.g. a user clicks something).

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.

Note that:

$(<root-element>).on(<event>, <selector>, <event-handler>)

is the same as:

$(<root-element>).delegate(<selector>, <event>, <event-handler>)

and that:

$(<selector>).on(<event>, <event-handler>)

is the same as:

$(<selector>).bind(<event>, <event-handler>)

.on() is new in jQuery 1.7 and if you are using 1.7+ then .delegate(<selector>, <event>, <event-handler>) is just a short-cut for .on(<event>, <selector>, <event-handler>).

UPDATE

Here is a performance test showing that it is faster to delegate event binding than to bind to each element individually: http://jsperf.com/bind-vs-click/29. Sadly this performance test has been removed.

UPDATE

Here is a performance test showing that event triggering is faster when you bind directly to elements rather than delegate the binding: http://jsperf.com/jquery-delegate-vs-bind-triggering (Note that this isn’t a perfect performance test since the binding methods are included in the test, but since delegate runs faster on binding it just means that bind is even faster relatively when talking about triggering)

More Related Contents:

  1. Javascript: function doesnt work even though condition is met (hard for me to explain)
  2. Direct vs. Delegated – jQuery .on()
  3. Check if an image is loaded (no errors) with jQuery
  4. How to distinguish between left and right mouse click with jQuery
  5. jQuery $(document).ready and UpdatePanels?
  6. How to debug JavaScript / jQuery event bindings with Firebug or similar tools?
  7. Can I find events bound on an element with jQuery?
  8. Getting value of select (dropdown) before change
  9. How can I detect pressing Enter on the keyboard using jQuery?
  10. What is the difference between the mouseover and mouseenter events?
  11. How to fire an event on class change using jQuery?
  12. Long Press in JavaScript?
  13. Event when user stops scrolling
  14. jQuery scroll() detect when user stops scrolling
  15. Fire jQuery event on div change
  16. Alternative to jQuery’s .toggle() method that supports eventData?
  17. How to stop events bubbling in jQuery? [duplicate]
  18. HTML5 dragleave fired when hovering a child element
  19. window.resize event firing in Internet Explorer
  20. jQuery event delegation
  21. How to detect if the user clicked the “back” button
  22. jQuery event that triggers after CSS is loaded?
  23. Open Select using Javascript/jQuery?
  24. Prevent firing focus event when clicking on div
  25. Bind events on dynamic created elements inserted by AJAX (check box)
  26. Catch scrolling event on overflow:hidden element
  27. Trigger for span text/html on changed
  28. jQuery .on() method doesn’t see new elements
  29. Cancel click event in the mouseup event handler
  30. jQuery event bubbling

Leave a Comment