jQuery delegate vs bind triggering (v19)

Revision 19 of this benchmark created by Milan Adamovsky 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>

Setup

function delegateHandler (e) {
        var event = event || window.event;
        var target = event.target || event.srcElement;    
    
        switch(target.nodeName){
            case "A":
                eventHandler(e);
                break;
        }
    }
    
    function eventHandler (e) {
      //e.preventDefault();
      console.log('xxx');
      return false;
    }
    function triggerClix($links)
     {
      var event = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true
      });
    
      Array.prototype.forEach.call($links, function( el ){
        for (var i = 100; i > 0; i--) {
          el.dispatchEvent(event);
        }
      });
     }
    var $nav2 = document.getElementById('nav2');
    var $links2 = $nav2.getElementsByTagName('a');
    
    $nav2.addEventListener("click", delegateHandler, false);
    
    var $nav1 = document.getElementById('nav1');
    var $links1 = $nav1.getElementsByTagName('a');
    
    Array.prototype.forEach.call($links1, function( el ){
      el.addEventListener("click", eventHandler, false);
    });

Test runner

Ready to run.

Testing in
TestOps/sec
bind
//var $nav = document.getElementById('nav1');
//var $links = $nav.getElementsByTagName('a');

//Array.prototype.forEach.call($links, function( el ){
//  el.addEventListener("click", eventHandler, false);
//});

console.log('bind');
triggerClix($links1);
 
ready
delegate
//var $nav = document.getElementById('nav2');
//var $links = $nav.getElementsByTagName('a');

//$nav.addEventListener("click", delegateHandler, false);

console.log('delegate');
triggerClix($links2);
ready

Revisions

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