Document：DOMContentLoaded 事件

在此页

范例
规范
浏览器兼容性
另请参阅
相关话题

DOMContentLoaded 事件激发当初始 HTML 文档已完全加载并剖析，无需等待样式表、图像及子框架完成加载。

冒泡	Yes
可取消	Yes (虽然被指定为不可取消的简单事件)
接口	`事件`
事件处理程序特性	None

不同事件， load ，应该仅用于检测完全加载页面。常见误解是使用 load where DOMContentLoaded 会更合适。

同步 JavaScript 会暂停对 DOM 的解析。若希望用户请求页面后尽快剖析 DOM，可以使 JavaScript 异步 and 优化样式表的加载。若照常加载，样式表以并行方式加载并从主 HTML 文档窃取流量，会减慢 DOM 剖析。

范例

基本用法

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

延迟 DOMContentLoaded

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
  });
for( let i = 0; i < 1000000000; i++)
{} // This synchronous script is going to delay parsing of the DOM,
   // so the DOMContentLoaded event is going to launch later.
</script>

校验加载是否已经完成

DOMContentLoaded 可能激发在脚本有机会运行之前，因此校验是明智的在添加监听器之前。

function doSomething() {
  console.info('DOM loaded');
}
if (document.readyState === 'loading') {  // Loading hasn't finished yet
  document.addEventListener('DOMContentLoaded', doSomething);
} else {  // `DOMContentLoaded` has already fired
  doSomething();
}

实时范例

HTML

<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>
<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>

CSS

body {
  display: grid;
  grid-template-areas: "control  log";
}
.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-log {
  grid-area: log;
}
.event-log-contents {
  resize: none;
}
label, button {
  display: block;
}
#reload {
  height: 2rem;
}

JS

const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');
reload.addEventListener('click', () => {
  log.textContent ='';
  window.setTimeout(() => {
      window.location.reload(true);
  }, 200);
});
window.addEventListener('load', (event) => {
    log.textContent = log.textContent + 'load\n';
});
document.addEventListener('readystatechange', (event) => {
    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});
document.addEventListener('DOMContentLoaded', (event) => {
    log.textContent = log.textContent + `DOMContentLoaded\n`;
});

结果

规范

规范	状态	注释
HTML 实时标准在该规范中的 DOMContentLoaded 定义。	实时标准
HTML5 在该规范中的 DOMContentLoaded 定义。	推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DOMContentLoaded` event	Chrome 1	Edge 12	Firefox 1	IE 9	Opera 9	Safari 3.1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 2	Samsung Internet Android 1.0

图例

完整支持

另请参阅

相关事件： load , readystatechange , beforeunload , unload
此事件在 Window 目标： DOMContentLoaded

元数据

最后修改： Apr 15, 2020

在此页

范例