定义load事件监听的两种方法:
一是通过addEventListener，把load事件绑定到window上。
1 2 3 | window.addEventListener('load', function() { console.log('window onload');}); |
二是直接在body上添加onload属性。
1 2 | <body onload="console.log('onload')"></body> |
Tips
根据DOM Level2 Events文档的描述，load事件应该在document而非window上被触发。然而由于所有的浏览器都已经实现了在window上触发load事件，为了向后兼容性的考虑，在浏览器中load事件的触发和spec上描述不一致。
两种定义load事件监听方式的执行顺序
如果在页面中同时添加这两种方式，谁会先被触发呢？触发点取决于何时加载注册load事件的脚本。按照HTML页面的加载顺序，如果把脚本放到head里加载，那么在window上注册的load事件会先触发，如果把脚本放到body里加载，那body上的onload事件会被先触发。
一般来说，任何在window上注册的事件，都可以通过在body上定义相应的事件属性来触发，这是因为在HTML里无法访问window元素。推荐的做法是尽可能的使用Javascript的方式注册事件。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）