JS Event Propagation

To understand event bubbling and capturing.

by nwali

HTML

<div id="div1">1
    <div id="div2">2
        <div id="div3">3</div>
    </div>
</div>

CSS

div {
 display: inline-block;
 padding: 20px;
 border: 1px solid #aaa;
 cursor: pointer;
}

#div1:hover {
 border: 1px solid #faa;
 background: blue;
}

#div2:hover {
 border: 1px solid #faa;
 background: green;
}

div:hover {
 border: 1px solid #faa;
 background: #fdd;
}

JavaScript

window.addEventListener("click", () => {    
  console.log('Window');
},true);
document.addEventListener("click", () => {  
  console.log('Document');
},true);
document.querySelector(".div3").addEventListener("click", () => {     
  console.log('DIV 3');  
},true);
document.querySelector(".div2").addEventListener("click", () => {    
  console.log('DIV 2');
},true);
document.querySelector("div1").addEventListener("click", () => {    
  console.log('DIV 1');
},true);