jQuery On vs Click (v12)

Revision 12 of this benchmark created on December 7, 2013

Description

Preparation HTML

<div id="Container">
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1">link</span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1"><input type="button" value="Button 1" class="input1" id="input1"></span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1"><input type="button" value="Button 2" class="input1" id="input2"></span></a>
  </div>
  <div class="d1">
    <a class="a1" href="#"><span class="s1"><input type="button" value="Button 3" class="input1" id="input3"></span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2">link2</span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2"><input type="button" value="Button 4" class="input2" id="input4"></span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2"><input type="button" value="Button 5" class="input2" id="input5"></span></a>
  </div>
  <div class="d2">
    <a class="a2" href="#"><span class="s2"><input type="button" value="Button 6" class="input2" id="input6"></span></a>
  </div>
  <input type="button" value="Button 7" class="input1" id="input7">
  <input type="button" value="Button 8" class="input2" id="input8">
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>

Teardown

    $('#input1').off();
    $('.input1').off();
    $('#input1').unbind();
    $('.input1').unbind();
    
  

Test runner

$('#input1').click(function() {
  alert('hello');
});

$('#input1').on('click', function() {
  alert('hello');
});

$('.input1').click(function() {
  alert('hello');
});

$('.input1').on('click', function() {
  alert('hello');
});

$('#Container').on('click', '.input1', function() {
  alert('hello');
});

$(document).on('click', '.input1' ,function() {
  alert('hello');
});

$(document).on('click', '#input1' ,function() {
  alert('hello');
});

if (document.getElementById('input1') != null){
document.getElementById('input1').onclick = function () { alert('hello'); }
}

for (var i in document.getElementsByClassName('input1')){
  document.getElementsByClassName('input1')[i].onclick = function() { alert('hello'); }
}

if (document.getElementById('input1') != null){
for (var i in document.getElementById('input1').getElementsByClassName('input1')){
  document.getElementById('input1').getElementsByClassName('input1')[i].onclick = function() { alert('hello'); }
}
}

if (document.querySelector('#input1') != null){
document.querySelector('#input1').onclick = function() { alert('hello'); }
}

for (var i in document.querySelectorAll('.input1')){
  document.querySelectorAll('.input1')[i].onclick = function() { alert('hello'); }
}

Revisions

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

• Revision 1: published on April 4, 2012
• Revision 2: published by DJI on July 20, 2012
• Revision 3: published on March 28, 2013
• Revision 4: published by test12344 on April 30, 2013
• Revision 5: published on May 16, 2013
• Revision 6: published on July 19, 2013
• Revision 7: published on July 19, 2013
• Revision 8: published on July 19, 2013
• Revision 9: published on July 20, 2013
• Revision 10: published on July 20, 2013
• Revision 11: published on October 3, 2013
• Revision 12: published on December 7, 2013
• Revision 13: published on February 6, 2014
• Revision 14: published on March 11, 2014
• Revision 16: published on June 5, 2014
• Revision 17: published on July 28, 2014
• Revision 18: published on August 13, 2014
• Revision 19: published on August 14, 2014
• Revision 20: published on October 6, 2014