DOM Level 3 CustomEvent vs jQuery.trigger (v2)

Revision 2 of this benchmark created on

Description

Given a nested DOM structure, trigger a custom event on a child element and find which method is faster to reach the top level listener. Create 2N child nodes for each level we go in depth to mimic a typical DOM hierarchy size.

This assumes you want to pass data in the events, and as such includes data in the event

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var jQueryListener = function(){/*Jquery Event terminates here*/};
var nativeListener = function(){/*Native CustomEvent terminates here*/};
var eventProperties = {
      relatedElement1 : document.createElement('div'),
      someArrayOfTweets : ['that was funny', 'I love that stuff!', 'what a blast!'],
      simpleNumber : 2,
      irrationalNumber: Math.PI,
      aJoke : "Knock Knock. Who's there? Ja... Ja who? Ja-vaScript",
      /*For native event, set bubbles as default is false */
      bubbles : true
};
var event = new CustomEvent('native-test', eventProperties);
</script>
<div id="eventTimedToReachHere">
    <ul>
        <li>List 2 Item 1</li>
        <li>List 2 Item 2</li>
        <li>List 2 Item 3</li>
        <li>List 2 Item 4</li>
    </ul>
    <ul>
        <li>List 2 Item 1</li>
        <li>List 2 Item 2</li>
        <li>List 2 Item 3</li>
        <li>List 2 Item 4
             <div>I'm 4 levels deep, div 1</div>
             <div>I'm 4 levels deep, div 2</div>
             <div>I'm 4 levels deep, div 3</div>
             <div>I'm 4 levels deep, div 4</div>
             <div>I'm 4 levels deep, div 5</div>
             <div>I'm 4 levels deep, div 6</div>
             <div>I'm 4 levels deep, div 7</div>
             <div>I'm 4 levels deep, div 8
                  <button>A Button 1</button>
                  <button>A Button 2</button>
                  <button>A Button 3</button>
                  <button>A Button 4</button>
                  <button>A Button 5</button>
                  <button>A Button 6</button>
                  <button>A Button 7</button>
                  <button>A Button 8</button>
                  <button>A Button 9</button>
                  <button>A Button 10</button>
                  <button>A Button 11</button>
                  <button>A Button 12</button>
                  <button>A Button 13</button>
                  <button>A Button 14</button>
                  <button>A Button 15</button>
                  <button id="eventStartsHere">A Button 16</button>
             </div>
        </li>
    </ul>
</div>

Setup

$('#eventTimedToReachHere').bind('jquery-test', jQueryListener);
    
    document.getElementById('eventTimedToReachHere').addEventListener('native-test', nativeListener);
    
    var eventTarget = document.getElementById('eventStartsHere');
    var eventTargetJquery = $(eventTarget);

Teardown


    $('#eventTimedToReachHere').unbind('jquery-test', jQueryListener);
    
    document.getElementById('eventTimedToReachHere').removeEventListener('native-test', nativeListener);

Test runner

Ready to run.

Testing in
TestOps/sec
DOM Level3 CustomEvent dispatched
eventTarget.dispatchEvent(event);
ready
jQuery .trigger(evt)
eventTargetJquery.trigger('jquery-test', eventProperties);
ready

Revisions

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