在JavaScript中为body与document绑定点击事件的差异探究

在监听页面全局点击时，绑定body和document的事件存在以下关键差异：

• 触发范围不同
  body元素的点击事件仅在点击到body实际占据的区域时触发。默认情况下，body的高度由内容撑开，如果页面内容不足以填满视口，视口内未被body覆盖的空白区域（比如页面底部）点击不会触发body的事件。而document是整个HTML文档的根节点，点击页面任何区域（包括body未覆盖的空白、浏览器滚动条区域）都会触发其绑定的点击事件。

• 事件传递的层级差异
  事件冒泡阶段的传递顺序是：触发事件的目标元素 → 父元素链 → body → document。因此body的点击事件会在document之前触发（冒泡模式下）。如果页面中某个元素调用event.stopPropagation()阻止事件冒泡，那么body的事件可能无法被触发；但如果是在捕获模式下绑定document的事件，它会在事件传递的最早期阶段触发，不受中间元素冒泡阻止的影响。

• 样式对触发的影响
  若body被设置了特殊样式（比如display: none、visibility: hidden或者高度被限制），其点击事件会直接失效。而document的事件不受body样式变化的影响，依然能正常响应页面点击。

• 兼容性与稳定性
  在部分旧浏览器（如IE早期版本）中，body的事件绑定存在兼容性问题，而document作为文档根节点，事件绑定的兼容性更稳定，几乎所有现代浏览器都支持。

测试示例代码：

// 绑定body点击事件
document.body.addEventListener('click', () => {
  console.log('body 被点击');
});

// 绑定document点击事件
document.addEventListener('click', () => {
  console.log('document 被点击');
});

当页面内容不足视口高度时，点击底部空白区域，只会输出document 被点击。

内容的提问来源于stack exchange，提问作者Vishnupriya