Event Capturing & Bubbling

JS OOPS

by manoj_antony32

HTML

<div id="main">
<div id="parent">
   <a href="https://www.google.com" id="child">child</a>
   <div id="other">Other</div>
</div>
</div>

CSS

#parent > div {
  border: 1px solid grey;
  padding:5px;
  margin-bottom:1em;
  width:100px;
  text-align: center;
  cursor: pointer;
}

JavaScript

var c = document.querySelector('#child');
c.addEventListener('click', function(event){
		console.log('Child clicked');
    //window.event.cancelBubble = true;
    //event.stopPropagation();
    //event.preventDefault();
    event.cancelable = true;
}, false);

var p = document.querySelector('#parent');
p.addEventListener('click', function(){
		console.log('Parent clicked');
}, false);