Understand JS Event Flow

Understand JS Event Flow

by Alex

HTML

<div id="parent-element">
  <p id="target-element">
    Yay I'm the child
  </p>
</div>
<pre id="console"></pre>

CSS

body {
  font-family: 'Helvetica';
  font-size: 20px;
  background-color: #607D8B;
}

#parent-element {
  width: 200px;
  height: 200px;
  padding: 10px;
  margin: 0 auto;
  background-color: #00695C;
}

#target-element {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 35px auto;
  background-color: #00897B;
}

pre{
  height: 50vh;
  max-height: 50vh;
  
  overflow: scoll;
}

JavaScript

// Window event listener 'click' on Capture Phase
 window.addEventListener('click', function(e) {
   document.getElementById('console').innerHTML += ('\nCapturing, window got clicked!');
   //e.stopPropagation();
 }, true);
 // Window event listener 'click' defaults to Bubble Phase
 window.addEventListener('click', function(e) {
   document.getElementById('console').innerHTML += ('\nBubbling, window got clicked!');
   //e.stopPropagation();
 } /*, false*/ );
 // parent-element event listener 'click' defaults to Bubble Phase
 document.getElementById('parent-element').addEventListener('click', function(e) {
   document.getElementById('console').innerHTML += ('\n  Capturing, parent div got clicked!');
   //e.stopPropagation();
 }, true);
 // parent-element event listener 'click' defaults to Bubble Phase
 document.getElementById('parent-element').addEventListener('click', function(e) {
   // if (this !== e.target) return; // try this with an arrow function!
   document.getElementById('console').innerHTML += ('\n  Bubbling, parent div got clicked!');
   //e.stopPropagation();
 } /*, false*/ );
 // target-element event listener 'click' defaults to Capture Phase
 document.getElementById('target-element').addEventListener('click', function(e) {
   document.getElementById('console').innerHTML += ('\n    Capturing, FINALLY target div got clicked!');
   //e.stopPropagation();
 }, true);
 // target-element event listener 'click' defaults to Bubble Phase
 document.getElementById('target-element').addEventListener('click', function(e) {
   document.getElementById('console').innerHTML += ('\n    Bubbling, FINALLY target div got clicked!');
   //e.stopPropagation();
 } /*, false*/ );