window.onload只能赋值一次，多次赋值会覆盖；可靠方式是用window.addEventListener('load', handler)，支持多次绑定且不覆盖；DOMContentLoaded更适用于仅需操作DOM的场景，触发更快。
window.onload 只能赋值一次，绑多了会覆盖；body 上的 onload 属性也一样。真要可靠绑定多个函数，得用 addEventListener('load', ...)。
为什么直接写 window.onload = function() {...} 常常不执行
常见错误不是语法错，而是时机和覆盖问题：
- 脚本放在
<head>里又没加defer，JS 执行时 DOM 还没解析完，但更关键的是：window.onload等的是所有资源（图片、CSS、字体、iframe）全部加载或超时，不是 DOM 就绪 - 写了两行
window.onload = fn1;和window.onload = fn2;，后一行直接干掉前一行，fn1永远不会执行 - 页面里有跨域失效的图片或 script，浏览器卡在等待它加载（可能几秒），
load事件就一直不触发 - 脚本执行位置太靠后，比如写在
</body>后面，事件早已触发完毕，注册等于白搭
addEventListener('load', ...) 怎么用才不踩坑
这是推荐做法，支持多次绑定，不覆盖，语义清晰：
- 必须绑定在
window上才有“全页面资源加载完成”的含义；绑定在document上没效果 - 写法是
window.addEventListener('load', handler)，不是'onload'—— 注意少个on - 如果 handler 是箭头函数且需访问
this，注意this指向window，不是元素 - IE8 及以下不支持，但基本不用考虑了；若真要兼容，得回退到
window.attachEvent('onload', handler)
示例：
立即学习“前端免费学习笔记（深入）”；
window.addEventListener('load', () => {
console.log('所有图片、CSS、JS、iframe 都已加载或失败');
// 此时可安全读取 img.naturalWidth、video.duration 等依赖资源加载的属性
});
什么时候该用 DOMContentLoaded 而不是 load
如果你只是想操作 DOM 元素（比如给按钮加 click、初始化表单），别等 load —— 它太慢，且容易被资源拖住：
-
DOMContentLoaded在 HTML 解析完、DOM 树建好就触发，不等图片、CSS、字体 - 它支持多次监听，且比
load快得多，尤其页面带大图或第三方资源时 - 绑定方式一样：
document.addEventListener('DOMContentLoaded', handler) - 只有当你需要读取
<img>的尺寸、<video>的时长、或确保某个外部 script 已执行完毕时，才非用load不可
真正容易被忽略的是：同一个页面里混用 window.onload 赋值和 addEventListener('load', ...)，前者仍会覆盖后者之前的赋值（因为它是直接改引用），而后者之间互不影响——所以要么全用 addEventListener，要么一个都别用。
