Event Capturing

by Venkatesh Dematti

HTML

<div id="main">
  <div id="parent">
    <div id="child">
      Child1
    </div>
    <div id="child2">
      Child2
    </div>
  </div>
</div>

CSS

#parent{
  width:20em;
  height:10em;
  border:1px dashed red;
}
#child,#child2{
  border:1px solid red;
  width:10em;
  margin-bottom:10px;
}

JavaScript

/*
	Event Capturing : Capture click event from top to bottom.
  If useCapture is set to true, then event capturing will happen
*/

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

parent.addEventListener("click",function(){
	console.log('Parent Clicked');
},true);

child.addEventListener("click",function(){
	console.log('Child Clicked');
},true);