javascript - 为什么 document.body.addEventListener 事件在 document.addEventListener 之前运行？

Question

当我运行这段代码时，为什么 .body 事件先触发？

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

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

Answer 1

它不是运行更快，而是运行更快。

事件从您单击的元素向上冒泡，直到它到达正文(触发正文上的事件监听器的位置)，然后它继续向上冒泡直到它到达文档(那里的事件监听器被触发)。

参见 MDN有关详细信息、图表以及如何在捕获阶段捕获事件。