JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<div id="div1" style="width:300px;height:300px;background:#00ffef;padding:30px">
<div  id="div2" style="width:100%;height:100%;background:#ffeff0;">
<button  id="but" style="width:50px;height:50px;margin:120px">
click
</button>

</div>
</div>
<a id="anchor" href="www.google.com">Google</a>

JavaScript

function myfunction1(e){
console.log("currentTarget-"+e.currentTarget.id+"  ,target-"+e.target.id);
	
   }
function myfunction(e){
console.log("currentTarget-"+e.currentTarget.id+"  ,target-"+e.target.id);
if(e.currentTarget.id=="div2")
		{
   
   //Prevents processing of any event listeners in elements subsequent to the current element in the event flow
   //uncommand to test stopPropagation
  //  e.stopPropagation();
    
    //Prevents processing of any event listeners in the current element and any subsequent elements()parents in the event flow.
   //uncommand to test stopImmediatePropagation
  //  e.stopImmediatePropagation();
    }

}
//Event prevent default example
function anchorClickHandler(e){
	e.preventDefault();
}
document.getElementById("anchor").addEventListener("click",anchorClickHandler);

//Event Target and current target
document.getElementById("div1").addEventListener("click",myfunction);
document.getElementById("div2").addEventListener("click",myfunction);
document.getElementById("div2").addEventListener("click",myfunction1);
document.getElementById("but").addEventListener("click",myfunction);

//Example for use capture
//document.getElementById("div1").addEventListener("click",myfunction,true);
//document.getElementById("div2").addEventListener("click",myfunction);
//document.getElementById("div2").addEventListener("click",myfunction1);
//document.getElementById("but").addEventListener("click",myfunction);