window与document的DOMContentLoaded事件：数据请求场景选型疑问

核心差异 #

DOMContentLoaded事件本质是由document对象触发的，之后会沿着DOM树向上冒泡到window对象。两者绑定的差异主要体现在以下几点：

• 事件监听阶段：绑定在document上是在目标元素（事件触发源）监听事件；绑定在window上是在冒泡阶段监听事件。
• 执行时机：实际开发中两者的回调执行时机几乎没有区别，事件从document冒泡到window的时间差可以完全忽略。
• 兼容性：所有现代浏览器（包括IE9及以上）都同时支持两种绑定方式，不存在兼容性差异。

最佳方案选择 #

推荐使用方式二（绑定在document上），原因如下：

1. 语义更清晰：事件的触发源是document，直接在触发元素上监听事件，符合"谁触发谁监听"的逻辑，代码可读性更强。
2. 避免极端情况：虽然极少出现，但如果有其他代码通过stopPropagation()阻止了事件冒泡，绑定在window上的回调会无法执行；而绑定在document上则不受影响。

你的数据请求代码和两种事件绑定写法本身都没有问题，换成推荐的方式二后，代码逻辑会更规范：

document.addEventListener('DOMContentLoaded', () => {
  getProducts().then(data => {
    // 这里写渲染页面的代码
  });
});

async function getProducts() {
  try {
    const result = await fetch('./products.json');
    const data = await result.json();
    return data ;
  } catch (error) {
    console.log(error);
  }
}

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