刷新页面会触发哪些事件？如何监听DOM元素的加载和变化？

刷新页面与 onload 事件

onload 事件会在整个页面加载完成后触发，包括所有 DOM 元素、样式表和图像。因此，只要刷新页面，onload 事件就会执行。

页面中多个 onload 事件的执行顺序

body 标签上的 onload 事件会在页面加载完成后首先执行。它负责执行页面的全局初始化任务。但是，div 标签没有 onload 事件。onload 事件只能在 body 标签上使用，它执行顺序优先于其他 DOM 元素。

模拟 DOM 元素加载监听

虽然 div 元素无法使用 onload 事件，但我们可以使用 DOMContentLoaded 事件或 MutationObserver API 来监听 DOM 元素的加载和变化。

DOMContentLoaded 事件会在 DOM 树加载完成后触发，忽略样式表和图像。MutationObserver API 允许我们监听特定 DOM 元素的变化，包括添加、删除或属性修改。

其他资源

• [Window：load 事件 - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/load_event)
• [Document: DOMContentLoaded 事件 - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/DOMContentLoaded_event)
• [MutationObserver - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)
• [聊聊JS DOM变化的监听检测与应用 « 张鑫旭-鑫空间-鑫生活](https://www.zhangxinxu.com/wordpress/2010/03/dom-%E4%B8%8D%E5%93%88%E7%9A%84%E7%9B%91%E6%8E%A5-%E6%A3%80%E6%B5%8B%E5%8F%AF%E9%9C%80%E7%9A%84%E5%8F%8A%E5%BE%80%E5%88%B0%E7%94%A8%E6%8A%80%E6%9C%AF/)

以上就是刷新页面会触发哪些事件？如何监听DOM元素的加载和变化？的详细内容，更多请关注php中文网其它相关文章！