Event Bubbling and Event Capturing

bubbleCapture.js

/*
  Author: Shourya Ranka
  Objective: Demonstrate event bubbling and capturing
*/

// event binding on parent <div> is captured by child elements too. Clicking on inner divs will pick this event.
document.querySelector('#target1').addEventListener('click', function(e){
  console.log(e.target.id);
},true);
// below three events indicate event bubbling, any event triggered on the child element will be bubbled up to parent too. 
document.querySelector('#target1').addEventListener('click', function(e){
  console.log("outermost item clicked")
});
document.querySelector('#target2').addEventListener('click', function(e){
  console.log("middle div clicked")
});
document.querySelector('#target3').addEventListener('click', function(e){
  console.log("innermost div clicked")
});

Code Execution @ https://codepen.io/sranka2310/pen/VwWpyPJ