Edit in JSFiddle


print("---------------------------------------");
print("SIMPLE STRUCTURE:");
//standard event
document.querySelector("#parent > .target").addEventListener("click",function(){

    print("Standard event handler");
    sp.stop("standard");

});

//delegate event handler
document.querySelector("#parent").addEventListener("click",function(e){

    if (e.target===document.querySelector(".target")){//check if we clicked on .target
      
        print("Delegated event handler");
        sp.stop("delegate");
        
    }

});

var sp=new Speeder();
//check speed
sp.start("standard");
sp.start("delegate");

document.querySelector("#parent .target").click();//trigger click

print(sp.compare("standard","delegate"));

print("---------------------------------------");
print("COMPLEX DOM STRUCTURE:");

//standard
document.querySelector("#parent2 > .target").addEventListener("click",function(){

    print("Standard event handler");
    sp.stop("standard2");

});

//we need helper function to find our element

function findInParents(elem,selector){
do {
    if(elem.matches(selector)) 
    return elem;
    
    elem = elem.parentNode;
  } while(elem);
}  
  
//delegate event handler
document.querySelector("#parent2").addEventListener("click",function(e){

    
    if (findInParents(e.target,".target")){//check if we clicked on .target
        
        
        print("Delegated event handler");
        sp.stop("delegate2");
        
    }

});
//check speed
sp.start("standard2");
sp.start("delegate2");

document.querySelector("#parent2 > .target").click();

print(sp.compare("standard2","delegate2"));
<h3>
Simple structure:
</h3>
<div id="parent">
=====================
<button class="target">
Click me!
</button>
=====================
</div>

<h3>
More complex structure:
</h3>
<div id="parent2">
=====================
<button class="target">
 <span><span><b>Click me!</b></span></span>
</button>
=====================
</div>

              

External resources loaded into this fiddle: