DOMContentLoaded事件是當document被完整的讀取跟解析後就會被觸發,不會等待 stylesheets, 圖片和subframes完成讀取 (
Note: Stylesheet loads block script execution, 如果
<link rel="stylesheet" ...>後面的話, 須等到前面的stylesheet載入並完成解析，此時
- Yes (although specified as a simple event that isn't cancelable)
- Default Action
||The event target (the topmost target in the DOM tree).|
||The type of event.|
||Whether the event normally bubbles or not.|
||Whether the event is cancellable or not.|
|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)|
Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.
Internet Explorer 8 supports the <code>readystatechange</code> event, which can be used to detect that the DOM is ready. In earlier version of Internet Explorer, this state can be detected by regularily trying to execute <code>document.documentElement.doScroll("left");</code>, as this snippet will throw an error until the DOM is ready.
General-purpose JS libraries such as jQuery offer cross-browser methods to detect that the DOM is ready. There are also standalone scripts that offer this feature : contentloaded.js (supports only one listener) and jquery.documentReady.js (doesn't depend on jQuery, despite its name).