jQuery delegate vs bind triggering (v17)

Revision 17 of this benchmark created by Chris Antaki on

Preparation HTML

<div id="nav1">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
</div>

<div id="nav2">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Aw Yeaaa</a>
</div>


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

Test runner

Ready to run.

Testing in
TestOps/sec
bind
var $nav = $('#nav1');
var $links = $nav.find('a');

$links.on('click', function(e) {
  e.preventDefault();
});

for (var i = 100; i > 0; i--) {
  $links.trigger('click');
}
ready
delegate
var $nav = $('#nav2');
var $links = $nav.find('a');

$nav.on('click', 'a', function(e) {
  e.preventDefault();
});

for (var i = 100; i > 0; i--) {
  $links.trigger('click');
}
ready

Revisions

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