Bind vs. Click vs. Delegate vs. Live (v27)

Revision 27 of this benchmark created on

Description

Determining whether it is faster to use click(), bind(), delegate(), or live() on click events.

Preparation HTML

<div id="extra-dom-content">
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>
<a href="#">Home</a>
<ul id="nav">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  var _nav = document.getElementById("nav");
  
  var $nav = $("#nav");
  
  var func = function(e) {
      e.preventDefault();
      };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Bind
$('#nav a').bind('click', function(e) {
  e.preventDefault();
});
ready
Click
$('#nav a').click(function(e) {
  e.preventDefault();
});
ready
Delegate
$("#nav").delegate('a', 'click', function(e) {
  e.preventDefault();
});
ready
Live
$('#nav a').live('click', function(e) {
  e.preventDefault();
});
ready
Each
$('#nav').each(function() {
  $('a', this).live('click', function(e) {
    e.preventDefault();
  });
});
ready
Live with context
$('a', _nav).live('click', function(e) {
  e.preventDefault();
});
ready
Delegate 2
$(_nav).delegate('a', 'click', function(e) {
  e.preventDefault();
});
ready
Delegate 3
$nav.delegate('a', 'click', function(e) {
  e.preventDefault();
});
ready
Delegate 4
$nav.delegate('a', 'click', func);
ready
live with nav context
$nav.live('click', func, 'a');
ready
Delegate _nav
$(_nav).delegate('a', 'click', func);
ready
Bind on nav
$('#nav').bind('click', function(e) {
  var target = e.target;
  e.preventDefault();
});
ready
Id on
$('#nav').on('click', 'a', function(e) {
  e.preventDefault();
});
ready

Revisions

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