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: