This page is Almost Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.


Overview Table

Synchronous No
Bubbles Yes
Target dom/Document
Cancelable Yes
Default action ?
The **DOMContentLoaded** event fires when the markup of a webpage has been parsed, which means it also fires before the [**onload**](/dom/Element/load) event. **DOMContentLoaded** is a good place to perform initialization tasks for your webpage, such as registering event handlers, initializing handles to support objects, and so on. This allows your initialization tasks to occur while the remaining resources for the webpage are being downloaded. For more information, see the [DOMContentLoaded test drive demo.](


<!doctype html>
  <script type="text/javascript">
function logMsg( sMsg ) {
  var oLog = document.getElementById('ResultLog');
  oLog.innerText += "\n" + sMsg;

function addListener(obj, eventName, listener) {
    if( obj.addEventListener ) {
        obj.addEventListener( eventName, listener, false );
    } else {
        obj.attachEvent("on" + eventName, listener);

function handleDCL( e ) {
  logMsg( "DOMContentLoaded event fired.\n" );
   var o = document.getElementById('button1');
   addListener(o, "click", handleClick1);

function handleClick1( e ) {
  logMsg( "Button 1 clicked.\n" );

if(!window.addEventListener) {
    logMsg( "Can't add eventListeners; not supported." )
} else {
   addListener(document, "DOMContentLoaded", handleDCL);
   addListener(window, "load", handleLoad);
  <button id="button1">Click me</button>
   <p id="ResultLog">Results appear here </p>

Related specifications

Candidate Recommendation

See also

Related pages