Bashiru Ismail Babatunde Bashiru Ismail Babatunde - 2 months ago 7
Javascript Question

Event Delegation in jQuery - Which Method is Better?

In a bid to write better code and improve how I use jQuery, I've been doing some reading recently. One of the new tips I learnt is using event delegation with jQuery.

While reading, I discovered two "supposed" different methods of addressing it. Below are code snippets to illustrate them.

Assuming I have an HTML block like this:

<html>
<head>
<title>Test Code</title>
</head>
<body>
<div id="switcher">
<button id="button1">Button 1</button>
<button id="button2">Button 1</button>
<button id="button3">Button 2</button>
<button id="button4">Button 3</button>
<button id="button5">Button 4</button>
<button id="button5">Button 5</button>
<button id="button6">Button 6</button>
<button id="button7">Button 7</button>
<button id="button8">Button 8</button>
<button id="button9">Button 9</button>
</div>
<!-- rest of code here -->
</body>
</html>


On click, I want to:


  1. Retrieve the id of the button clicked (for further manipulation).

  2. Toggle the class to "active" for any of the buttons.



Instead of doing this:

$('#switcher').find('button').click(function(){
var $element = $(this);
var elementid = this.id;
$element.toggleClass('clicked');
//rest of code here
});


I can either do this (Method 1)

$('#switcher').click(function(eventName){
if ($(eventName.target).is('button')) {
var $element =$(eventName.target);
var elementid = eventName.target.id;
$element.toggleClass('active');
//rest of code here
}
});


Or this (Method 2)

$('#switcher').on('click', 'button', function(){
var $element = $(this);
var elementid = this.id;
$element.toggleClass('active');
//rest of code here
});



  1. Are these 2 actually both delegation techniques?

  2. If so, Which of the two methods is faster (or better performance wise) and handles delegation better?

  3. Are there browser limitations?


Answer

In your very specific case, the two methods will offer the exact same functionality when clicking on a button element (on all browsers) and performance will be the same (since it is a click event, it would be a tiny difference and would also be difficult to test in an accurate way).

This is true for your particular structure:

<div id="switcher">
      <button id="button1">Button 1</button>
      <button id="button3">Button 2</button>
</div>

But if the DOM structure changes, only a little bit:

<div id="switcher">       
    <button id="button1">
        <div class="inner">Button 1</div>
    </button>
    <button id="button3">
        <div class="inner">Button 2</div>
    </button>
</div>

...then only the "official" jQuery event delegation will actually detect click events on all children.

If you already use jQuery in your page, hacking the event listener to emulate event delegation is useless. You won't get any advantage, apart from writing more code. Someone mentioned performance: forget it with click events. Useless optimisation is at least as bad as premature optimisation because it wastes your time and makes code less readable, but in this case it would not even be an optimisation (or it would be just a geek game to prove seriously).

Beware that click events rarely (or never?) represent a performance issue. They only happen once in a while. RequestAnimationFrame, scroll or resize can represent a problem, not clicks. The only case a click event could be a performance issue would be if you have an insanely (really extreme!) complex DOM structure: but in that case it would probably mean that you should fix that first.