Event listeners comparison - $().click, addEventListener, onclick (v9)

Revision 9 of this benchmark created on January 21, 2013

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>

Setup

divs = document.getElementsByTagName('div');
  length = divs.length;
  for(var i = 0; i < length; i++){
    $(divs[i]).unbind().prop("onclick", null);
  }

Test runner

for(var i = 0; i < length; i++){
  $(divs[i]).click(function(){
    console.log('hi');
  });
}

for(var i = 0; i < length; i++){
  divs[i].addEventListener('click', function(){
    console.log('hi');
  });
}

for(var i = 0; i < length; i++){
  divs[i].onclick = function(){
    console.log('hi');
  };
}

var f = function (){
  console.log('hi');
}

for(var i = 0; i < length; i++){
  $(divs[i]).click(f);
}

var f = function (){
  console.log('hi');
}

for(var i = 0; i < length; i++){
  divs[i].addEventListener('click', f);
}

var f = function (){
  console.log('hi');
}

for(var i = 0; i < length; i++){
  divs[i].onclick = f;
}

Revisions

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

• Revision 1: published on October 14, 2010
• Revision 2: published on October 14, 2010
• Revision 4: published on November 15, 2012
• Revision 5: published on November 15, 2012
• Revision 6: published on November 15, 2012
• Revision 7: published on November 15, 2012
• Revision 8: published on November 15, 2012
• Revision 9: published on January 21, 2013
• Revision 10: published on August 20, 2013
• Revision 11: published by LZAntal on November 23, 2013
• Revision 12: published on December 20, 2013
• Revision 13: published on December 25, 2013
• Revision 15: published on February 4, 2014
• Revision 16: published on April 28, 2014
• Revision 17: published by rvmn on July 23, 2014
• Revision 22: published on March 26, 2015
• Revision 28: published on March 3, 2024