Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JS BinEvent Bubbling and Propagation// source https://jsbin.com/salipuv
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)
<div id="grandParent">
<div id="parent">
<div id="counter">0</div>
<button>Click</button>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment