Event Bubbling & Capturing

by nabendu

HTML

<div class="main">
  <h1>Event Bubbling</h1>  
  <div class="parent">
    <button id="child">Child1</button>
  </div>  
  <h1>Event Capturing</h1>    
  <div class="parent2">
    <button id="child2">Child2</button>
  </div> 
</div>

CSS

.parent, .parent2{
  display: flex;
  background: yellow;
  width: 80%;
  height: 100px;
  align-items: center;
  justify-content: center;
}

.parent2{
  background: green;
}

JavaScript

//Event Bubbling
var p = document.querySelector('.parent');

p.addEventListener('click', function(){
	console.log('parent clicked')
});

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

c.addEventListener('click', function(){
	console.log('child clicked')
});

//Event Capturing
var p2 = document.querySelector('.parent2');

p2.addEventListener('click', function(){
	console.log('parent2 clicked')
},true);

var c2 = document.querySelector('#child2');

c2.addEventListener('click', function(){
	console.log('child2 clicked')
},true);