页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。
注: 样式文件的加载会阻塞脚本的执行,所以如果你把一个<script>元素放在了一个<link rel="stylesheet" ...>后面,如果页面没有完成解析,则DOMContentLoaded事件不会触发,直到样式文件加载完成之后.
常规信息
- 规范
- HTML5
- 接口
- Event
- 是否冒泡
- 是
- 能否取消默认行为
- 能 (虽然在规范中被规定成了一个简单事件,不能取消默认行为)
- 目标
- Document
- 默认行为
- 无.
属性
| Property | Type | Description |
|---|---|---|
target 只读 |
EventTarget |
The event target (the topmost target in the DOM tree). |
type 只读 |
DOMString |
The type of event. |
bubbles 只读 |
boolean |
Does the event normally bubble? |
cancelable 只读 |
boolean |
Is it possible to cancel the event? |
示例
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 0.2 | 1.0 (1.7 or earlier) | 9.0 | 9.0 | 3.1 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1) | ? | (Yes) | (Yes) |
至少从Gecko 1.9.2,Chrome 6,以及Safari 4开始,就已经实现了该事件的冒泡行为.
兼容不支持该事件的浏览器
在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态，因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。
诸如jQuery这样的通用JS库，会提供跨浏览器的方法来检测DOM是否加载完成。也有其他专门实现该功能的脚本:contentloaded.js (只能添一个时间监听函数)以及jquery.documentReady.js (并不依赖jQuery,虽然名字中有jquery).