Event Capture and Bubble phase in DOM

http://www.quirksmode.org/js/events_order.html

by victorrseloy

HTML

<body>
  <div id="prnt" >
    hello
    <div id="child" >
      bye
    </div>
  </div>
      
</body>

CSS

#prnt{
  width: 100px;
  border: 2px solid red;
  padding: 2px;
  height: 80px;
}

#child{
  margin: 5px;
  width: 50px;
  border: 2px solid green;
  padding: 1px;
  height: 20px;
}

JavaScript

function prnt(){
  console.log("parent clicked");
}

function child(e){
	e.stopPropagation();
  console.log("child clicked");
}


var p = document.getElementById("prnt");
var c = document.getElementById("child");

p.addEventListener("click",prnt);
c.addEventListener("click",child,{once:true});