Skip to content

Instantly share code, notes, and snippets.

@thiagodebastos
Last active May 13, 2018 07:33
Show Gist options
  • Save thiagodebastos/b0d20e86591755f1c03a1b988ec8aed4 to your computer and use it in GitHub Desktop.
Save thiagodebastos/b0d20e86591755f1c03a1b988ec8aed4 to your computer and use it in GitHub Desktop.
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