Testing Bubbling

Benchmark created on


Preparation HTML

<div id="A">Div A
  <div id="B">Div B
    <div id="C">Div C
      <div id="D">Div D
        <div id="E">Div E
          <div id="F">Div F
            <div id="G">Div G
              <div id="H">Div H
                <button id="I">Click me while watching the console.</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Setup

var divA = document.getElementById('A');
    var callbackA = function(){
      console.log('A');
    };
    
    var divB = document.getElementById('B');
    var callbackB = function(){
      console.log('B');
    };
    
    var divC = document.getElementById('C');
    var callbackC = function(){
      console.log('C');
    };
    
    var divD = document.getElementById('D');
    var callbackD = function(){
      console.log('D');
    };
    
    var divE = document.getElementById('E');
    var callbackE = function(){
      console.log('E');
    };
    
    var divF = document.getElementById('F');
    var callbackF = function(){
      console.log('F');
    };
    
    var divG = document.getElementById('G');
    var callbackG = function(){
      console.log('G');
    };
    
    var divH = document.getElementById('H');
    var callbackH = function(){
      console.log('H');
    };
    
    var buttonI = document.getElementById('I');
    var callbackI = function(){
      console.log('I');
    };
    
    divA.addEventListener("click", callbackA);
    divB.addEventListener("click", callbackB);
    divC.addEventListener("click", callbackC);
    divD.addEventListener("click", callbackD);
    divE.addEventListener("click", callbackE);
    divF.addEventListener("click", callbackF);
    divG.addEventListener("click", callbackG);
    divH.addEventListener("click", callbackH);
    buttonI.addEventListener("click", callbackI);

Test runner

Ready to run.

Testing in
TestOps/sec
Raising Event Programmatically
buttonI.click();
ready
Invoking Functions Inline
callbackA();
callbackB();
callbackC();
callbackD();
callbackF();
callbackG();
callbackH();
callbackI();
ready

Revisions

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