jQuery delegate vs bind triggering (v24)

Revision 24 of this benchmark created by Jason on

Description

Modified using "on" in both cases.

Preparation HTML

<div id="complete-holder">
<div id="extra-dom-content">
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
<a class='t1' href="#">Home</a>
</div>
<a class='t1' href="#">Home</a>
<ul id="nav">
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
<li><a class='t1' href="#">Home</a></li>
<li><a class='t1' href="#">About</a></li>
<li><a class='t1' href="#">Blog</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
bind
$('#nav').find('a').on('click', function(e) {
    e.preventDefault();
}).trigger('click');
 
ready
delegate
$('#nav').on('a', 'click', function(e) {
 e.preventDefault();
}).find('a').trigger('click');
ready
document .on
$(document)
.on('click', '#nav a', function(e) {
 e.preventDefault();
})
.find('a')
.trigger('click');
ready
complete-holder
$("#complete-holder")
.on('click', '#nav a', function(e) {
 e.preventDefault();
})
.find('a')
.trigger('click');
ready
document bind with case
$(document).click(function(e) {
    if($(e.target)[0].tagName == 'A'){e.preventDefault();}
    

})
.find('a')
.trigger('click');
ready
document bind has class
$(document).click(function(e) {
    if($(e.target).hasClass('t1')){e.preventDefault();}
})
.find('a')
.trigger('click');
ready
document bind with e type in js
$(document).click(function(e) {
    if(e.target.tagName == 'A'){e.preventDefault();}
    

})
.find('a')
.trigger('click');
ready

Revisions

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