JS BinEvent Bubbling and Propagation// source https://jsbin.com/salipuv

eventBubbling.js

const grandParent = document.getElementById("grandParent")
const parent = document.getElementById("parent")
const counter = document.getElementById("counter")
let count = 0

function increaseCounter(event) {
  event.preventDefault()
  // if we don't stop propagation, the this function will run on both event listeners, thus increasing count by 2
  // event.stopPropagation()
  count += 1
  counter.innerText = count
}

parent.addEventListener('click', increaseCounter)
grandParent.addEventListener('click', increaseCounter)

index.html

<div id="grandParent">
  <div id="parent">
    <div id="counter">0</div>
    <button>Click</button>
  </div>
</div>