jQuery click vs bind vs on vs addeventhandler (v16)

Revision 16 of this benchmark created by Daniel on

Description

(FOR MOBILE BROWSERS)Tests performance of jQuery event listeners.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="main">    
    <div>
    <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    </ul>
    </div>
</div>
<div class="btncontainer">
    <button id="btn" class="btns">click me</button>
    <button id="btn" class="btns">click me</button>
    <button id="btn" class="btns">click me</button>
    <button id="btn" class="btns">click me</button>
    <button id="btn" class="btns">click me</button>
</div>

Setup

var btns = document.getElementsByClassName("btns");
    var $btns= $(".btns");
    var body = $("body");

Test runner

Ready to run.

Testing in
TestOps/sec
click
for (var i = 0; i < btns.length; i++) {
  $(btns[i]).click(function() {
    $("ul > li").each(function(index) {
      $(this).css("background-color", "green");
    });
  });
}
ready
bind
for (var i = 0; i < btns.length; i++) {
  $(btns[i]).bind("click", function() {
    $("ul > li").each(function(index) {
      $(this).css("background-color", "green");
    });
  });
}
ready
on
for (var i = 0; i < btns.length; i++) {
  $(btns[i]).on("click", function() {
    $("ul > li").each(function(index) {
      $(this).css("background-color", "green");
    });
  });
}
ready
onclick
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    $("ul > li").each(function(index) {
      $(this).css("background-color", "green");
    });
  }
}
ready
on - cached selctor
for (var i = 0; i < btns.length; i++) {
  $btns.eq(i).on("click", function() {
    $("ul > li").each(function(index) {
      $(this).css("background-color", "green");
    });
  });
}
ready
click - cached selector
for (var i = 0; i < btns.length; i++) {
  $btns.eq(i).click(function() {
    $("ul > li").each(function(index) {
      $(this).css("background-color", "green");
    });
  });
}
ready
bind - cached selector
for (var i = 0; i < btns.length; i++) {
  $btns.bind("click", function() {
    $("ul > li").each(function(index) {
      $(this).css("background-color", "green");
    });
  });
}
ready
delegate
body.delegate("button","click", function() {
  $("ul > li").each(function(index) {
      $(this).css("background-color", "green");
    });
});
ready
addEventListener
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    $("ul > li").each(function(index) {
      $(this).css("background-color", "green");
    });
  });
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.