Why does the document.body.addEventListener event run before document.addEventListener?

Question

When I run this code, why does the .body event fire first?

document.addEventListener('click', function() {
  console.log('The document was clicked');
});

document.body.addEventListener('click', function() {
  console.log('The document body was clicked');
});

Because in the DOM heirarchy, the body is closer to the click than the document — j08691, Jul 11 '19 at 15:59
Read here -> https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — DanieleAlessandra, Jul 11 '19 at 15:59

score 5 · Answer 1 · answered Jul 11 '19 at 15:59

5

It doesn't run faster, it runs sooner.

The event bubbles up from the element you clicked until it reaches the body (where the event listener on the body is fired) and then it continues bubbling up until it reaches the document (where the event listener there is fired).

See MDN for more detail, diagrams, and how to capture events in the capturing phase.

answered Jul 11 '19 at 15:59

Quentin

914,110
126
1,211
1,335

Thank you I have gone through the bubbling but it seems I didn't catch it very well. but I get it now – Sam Jul 12 '19 at 11:51

score 0 · Answer 2 · answered Sep 27 '20 at 17:40

0

simply because both of them will be activated by the bubble phase so it runs from downside to upside so the body.listener will work first then the document.listener

answered Sep 27 '20 at 17:40

Mohamad Abdelsamad

17
1
3

Why does the document.body.addEventListener event run before document.addEventListener?

2 Answers2