Bubbling

General Info

Event listeners will bubble up if they are listening to multiple levels of the DOM when you click on a nested element and trigger any other event listeners on parent items.

Quick Links

Wes Bos Video

Sample Code

HTML

  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>

JS

const divs = document.querySelectorAll('div');
const button = document.querySelector('button');

  function logText(e) {
    console.log(this.classList.value);
    e.stopPropagation(); // stops bubbling!
    console.log(this);
  }