steevehook
7/19/2018 - 1:44 PM

capture vs bubble (events)

Event capturing vs event bubbling

explanation.md
content_copyfile_download
  • Rendered
  • Source

Explanation

Events can be activated at two occasions: At the beginning ("capture"), and at the end ("bubble"). Events are executed in the order of how they're defined. Say, you define 4 event listeners.

The alert boxes will pop up in this order

  • 2 (defined first, using capture=true)
  • 4 (defined second using capture=true)
  • 1 (first defined event with capture=false)
  • 3 (second defined event with capture=false)
example.js
content_copyfile_download
window.addEventListener("click", function(){alert(1)}, false);
window.addEventListener("click", function(){alert(2)}, true);
window.addEventListener("click", function(){alert(3)}, false);
window.addEventListener("click", function(){alert(4)}, true);

// Order of execution

// 2
// 3
// 1
// 3