Understand JS Event Flow

Understand JS Event Flow

by Alex

HTML

<script src="https://fonts.googleapis.com/icon?family=Roboto"></script>
    <div id="parent-element">
      <p id="target-element">
        Yay I'm the child
      </p>
    </div>
    <pre id="console"></pre>

CSS

body {
        font-family: Roboto;
        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;
      }

JavaScript

// Window event listener 'click' on Capture Phase
      window.addEventListener('click', function(e) {
                document.getElementById('console').innerHTML = ('Capturing, window got clicked!');
        //e.stopPropagation();
      }, true);
      // Window event listener 'click' defaults to Bubble Phase
      window.addEventListener('click', function(e) {
        document.getElementById('console').innerHTML = ('Bubbling, window got clicked!');
        //e.stopPropagation();
      } /*, false*/ );
      // parent-element event listener 'click' defaults to Bubble Phase
      document.getElementById('parent-element').addEventListener('click', function(e) {
        console.log('  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!
        console.log('  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) {
        console.log('    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) {
        console.log('    Bubbling, FINALLY target div got clicked!');
        //e.stopPropagation();
      } /*, false*/ );