为什么 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 。