在前端开发中，当我们将一个元素添加到页面上时，会触发一系列的事件。这些事件可以帮助我们更好地掌握页面的渲染过程，优化性能以及增强用户体验。
DOMContentLoaded
DOMContentLoaded 事件在页面所有的 DOM 节点都已经加载并且解析完成后被触发。这意味着在此之前，如果有任何脚本需要操作 DOM 元素，它们将无法找到其目标。
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM is ready');
});load
load 事件在整个页面（包括图片、CSS、JS 文件等）都已经加载完成后被触发。这允许我们在页面完全加载后执行一些操作，例如初始化页面状态或动画。
window.addEventListener('load', function() {
console.log('Page is loaded');
});beforeunload 和 unload
beforeunload 事件在用户即将离开页面时触发，这提供了一个机会来询问他们是否真的想要离开。但是请注意，浏览器可能不支持自定义消息，所以我们应该谨慎使用。
window.addEventListener('beforeunload', function(event) {
// Cancel the event
event.preventDefault();
// Chrome requires returnValue to be set
event.returnValue = '';
});unload 事件在用户已经离开页面时触发，这允许我们执行一些清理操作，例如关闭持久连接或释放资源。
window.addEventListener('unload', function() {
console.log('Page is unloaded');
});MutationObserver
MutationObserver 是一个强大的 API，可以观察到 DOM 元素的变化，并在变化发生时执行特定的操作。这对于实时更新 UI、执行动画或自定义表单验证非常有用。
-- -------------------- ---- -------
-- ------ --- ---- ---- ---- -- -------- --- ---------
----- ---------- - -----------------------------------
-- ------- --- --- -------- ------ --------- -- --------
----- ------ - - ---------- ----- -------- ---- --
-- -------- -------- -- ------- ---- --------- --- --------
----- -------- - ----------------------- --------- -
------- -------- -- -------------- -
-- -------------- --- ------------ -
-------------- ----- ---- --- ---- ----- -- -----------
-
-
--
-- ------ -- -------- -------- ------ -- --- -------- --------
----- -------- - --- ---------------------------
-- ----- --------- --- ------ ---- --- ---------- ---------
---------------------------- --------
-- ------ --- --- ---- ---------
----------------------在前端开发中，了解这些事件及其用途是非常重要的。通过使用 DOMContentLoaded 和 load 事件，我们可以确保脚本在正确的时间运行，而 beforeunload 和 unload 事件则允许我们增强用户体验。最后，通过使用 MutationObserver API，我们可以在 DOM 变化时执行自定义操作，从而提高应用程序的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10743
