页面加载的时候主要有哪些事件？

在用户向浏览器地址栏内输入地址到网页显示这段过程之间，主要会触发以下两个事件：

• DOMContentLoaded ：当HTML文档被完全加载且完全解析构建了DOM树之后，将会触发DOMContentLoaded 事件。

  注意： 此时 样式、图片 之类的外部资源可能尚未加载完成。

• load：当浏览器加载完成了HTML以及所有的外部资源（图片、样式等）之后，将会触发load事件。

下面是一张浏览器渲染的过程图，我们刚刚介绍的两个事件，分别位于下图的箭头位置

当用户退出页面时主要有哪些事件？

当用户做下面的事情时：

• 关闭页面
• 刷新页面 会触发下面两个事件：
• beforeunload
• unload

beforeunload：此时页面还未被直接关闭。如果用户点击了确定按钮，此时页面将会关闭或者刷新，当然用户也可以取消关闭或者刷新页面。 unload：当用户离开页面时触发事件。

使用beforeunload有什么需要注意的？

根据HTML的规范，我们需要调用preventDefault()，调用示例代码如下：

window.addEventListener('beforeunload', (event) => {
  // 根据标准，我们需要调用preventDefault方法
  event.preventDefault();
  // Chrome需要设置returnValue
  event.returnValue = '';
});

由于某些站点滥用该api，因此Chrome浏览器从v51起，无法自定义显示给用户的消息，详情请见Remove custom messages in onbeforeunload dialogs。

使用unload有什么需要注意的？

unload事件在下面两个事件后被触发：

• beforeunload
• pagehide

使用DOMContentLoaded 有什么需要注意的？

我们必须要使用addEventListener 来监听该事件！示例代码如下： document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); });

使用load 有什么需要注意的？

我们可以通过调用下方的代码来监听该事件

  window.onload = function() { // 与此相同 window.addEventListener('load', (event) => {
    	console.log('Page loaded');
  };

相关资料

www.ruanyifeng.com/blog/2018/1… developers.google.com/web/updates… ithelp.ithome.com.tw/articles/10… zh.javascript.info/onload-ondo… developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/… github.com/dperini/Con…