Event Bubbling

  • Events in JavaScript may trigger event listeners on multiple elements
  • Events will usually trigger appropriate listeners on all parent elements
  • Interacting with an element often implies interacting with the parent element
  • This is not based on physical page layout
  • This can be cancelled with event.stopPropagation()
<div onclick="console.log('div')">
    <button onclick="console.log('button')">Click me</button>
</div>

13 / 17