jQuery 1.7.1 (2) .click() vs .bind() vs .live() vs .delegate() vs .on() (v42)

Revision 42 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="all">
<div id="header">
<div id="logo">Logo</div>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
</ul>
</div>
<div id="contents">
<div id="main">
<h1>Some paragraph</h1>
<h2>Some paragraph</h2>
<p>Some paragraph</p>
<p>Some paragraph</p>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
</ul>
<h2>Some paragraph</h2>
<p>Some paragraph</p>
<h3>Some paragraph</h3>
<p>Some paragraph</p>
<p>Some paragraph</p>
</div>
<div id="navi">
<p>Some paragraph</p>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
</ul>
</div>
</div>
<div id="footer">
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
</ul>
<p id="copyright">Copyright</p>
</div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
.live()
$('#main p').live('click', $.noop);
ready
.live() with main
$('p', $('#main')).live('click', $.noop);
ready
.delegate()
$('#main').delegate('p', 'click', $.noop);
ready
.delegate() on document
$(document).delegate('#main p', 'click', $.noop);
ready
.on()
$('#main').on('click', 'p', $.noop);
ready
.on() on document
$(document).on('click', '#main p', $.noop);
ready
.bind()
$('#main p').bind('click', $.noop);
ready
.click()
$('#main p').click($.noop);
ready
.on() on p
$('#main p').on('click', $.noop);
ready
.on() on body
$('body').on('click', '#main p', $.noop);
ready

Revisions

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