Custom dom event VS Event frameworks

Benchmark created by rmunson on November 4, 2015

Preparation HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var domSwitchboard = document.createElement('div');
var domSwitchboardCapture = document.createElement('div');
var jqSwitchboard  = $(document.createElement('div'));

function publishDomEvent(key){
                        var evt=document.createEvent('Events');

                        evt.initEvent(key,false,false);
                        evt.target=key;
                        evt.originalTarget=key;
                        domSwitchboard.dispatchEvent(evt);
}

function publishDomEventCapture(key){
                        var evt=document.createEvent('Events');

                        evt.initEvent(key,false,false);
                        evt.target=key;
                        evt.originalTarget=key;
                        domSwitchboardCapture.dispatchEvent(evt);
}

</script>

Setup

var one = $.Deferred(),
      two = $.Deferred(),
      three = $.Deferred();
    
    window.when = $.when(one, two, three);
    
    function cb1() {
      one.resolve(true);
    }
    
    function cb2() {
      two.resolve(true);
    }
    
    function cb3() {
      three.resolve(true);
    }
    
    domSwitchboard.addEventListener("testKey", cb1, false, true);
    domSwitchboard.addEventListener("testKey", cb2, false, true);
    domSwitchboard.addEventListener("testKey", cb3, false, true);
    
    domSwitchboardCapture.addEventListener("testKey2", cb1, true, true);
    domSwitchboardCapture.addEventListener("testKey2", cb2, true, true);
    domSwitchboardCapture.addEventListener("testKey2", cb3, true, true);
    
    jqSwitchboard.on("testKey3", cb1);
    jqSwitchboard.on("testKey3", cb2);
    jqSwitchboard.on("testKey3", cb3);

Teardown

    domSwitchboard.removeEventListener("testKey", cb1, false, true);
    domSwitchboard.removeEventListener("testKey", cb2, false, true);
    domSwitchboard.removeEventListener("testKey", cb3, false, true);
    
    domSwitchboardCapture.removeEventListener("testKey2", cb1, true, true);
    domSwitchboardCapture.removeEventListener("testKey2", cb2, true, true);
    domSwitchboardCapture.removeEventListener("testKey2", cb3, true, true);
    
    jqSwitchboard.off("testKey3", cb1);
    jqSwitchboard.off("testKey3", cb2);
    jqSwitchboard.off("testKey3", cb3);
  

Test runner

// async test
when.done(function() {
  deferred.resolve()
});
publishDomEvent("testKey");

// async test
when.done(function() {
  deferred.resolve()
});
publishDomEventCapture("testKey2");

// async test
when.done(function() {
  deferred.resolve()
});
jqSwitchboard.triggerHandler("testKey3");

Revisions

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

• Revision 1: published by rmunson on November 4, 2015