Skip to content

Instantly share code, notes, and snippets.

@jsonberry

jsonberry/onload.js

Last active July 3, 2023 14:10
Show Gist options
  • Save jsonberry/0d71007ea188785e1a3d13d2e30d58a5 to your computer and use it in GitHub Desktop.
Save jsonberry/0d71007ea188785e1a3d13d2e30d58a5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jsonberry revised this gist Jul 27, 2019. 1 changed file with 21 additions and 12 deletions.
    33 changes: 21 additions & 12 deletions onload.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,45 +1,54 @@
    // Taken from: http://stackoverflow.com/questions/588040/window-onload-vs-document-onload
    // According to Parsing HTML documents - The end,
    // The browser parses the HTML source and runs deferred scripts.
    // A DOMContentLoaded is dispatched at the document when all the HTML has been parsed and have run. The event bubbles to the window.
    // The browser loads resources (like images) that delay the load event.
    // A load event is dispatched at the window.
    // Therefore, the order of execution will be
    // DOMContentLoaded event listeners of window in the capture phase
    // DOMContentLoaded event listeners of document
    // DOMContentLoaded event listeners of window in the bubble phase
    // load event listeners (including onload event handler) of window
    // A load event listener (including onload event handler) in document should never be invoked.
    /**
    Taken from: http://stackoverflow.com/questions/588040/window-onload-vs-document-onload
    According to Parsing HTML documents - The end,
    The browser parses the HTML source and runs deferred scripts.
    A DOMContentLoaded is dispatched at the document when all the HTML has been parsed and have run. The event bubbles to the window.
    The browser loads resources (like images) that delay the load event.
    A load event is dispatched at the window.
    Therefore, the order of execution will be
    DOMContentLoaded event listeners of window in the capture phase
    DOMContentLoaded event listeners of document
    DOMContentLoaded event listeners of window in the bubble phase
    load event listeners (including onload event handler) of window
    A load event listener (including onload event handler) in document should never be invoked.
    */

    window.addEventListener('DOMContentLoaded', function() {
    console.log('window - DOMContentLoaded - capture'); // 1st
    }, true);

    document.addEventListener('DOMContentLoaded', function() {
    console.log('document - DOMContentLoaded - capture'); // 2nd
    }, true);

    document.addEventListener('DOMContentLoaded', function() {
    console.log('document - DOMContentLoaded - bubble'); // 2nd
    });

    window.addEventListener('DOMContentLoaded', function() {
    console.log('window - DOMContentLoaded - bubble'); // 3rd
    });

    window.addEventListener('load', function() {
    console.log('window - load - capture'); // 4th
    }, true);

    document.addEventListener('load', function() {
    console.log('document - load - capture'); // DOES NOT HAPPEN
    }, true);

    document.addEventListener('load', function() {
    console.log('document - load - bubble'); // DOES NOT HAPPEN
    });

    window.addEventListener('load', function() {
    console.log('window - load - bubble'); // 4th
    });

    window.onload = function() {
    console.log('window - onload'); // 4th
    };

    document.onload = function() {
    console.log('document - onload'); // DOES NOT HAPPEN
    };
  2. jsonberry created this gist Aug 10, 2016.
    45 changes: 45 additions & 0 deletions onload.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    // Taken from: http://stackoverflow.com/questions/588040/window-onload-vs-document-onload
    // According to Parsing HTML documents - The end,
    // The browser parses the HTML source and runs deferred scripts.
    // A DOMContentLoaded is dispatched at the document when all the HTML has been parsed and have run. The event bubbles to the window.
    // The browser loads resources (like images) that delay the load event.
    // A load event is dispatched at the window.
    // Therefore, the order of execution will be
    // DOMContentLoaded event listeners of window in the capture phase
    // DOMContentLoaded event listeners of document
    // DOMContentLoaded event listeners of window in the bubble phase
    // load event listeners (including onload event handler) of window
    // A load event listener (including onload event handler) in document should never be invoked.

    window.addEventListener('DOMContentLoaded', function() {
    console.log('window - DOMContentLoaded - capture'); // 1st
    }, true);
    document.addEventListener('DOMContentLoaded', function() {
    console.log('document - DOMContentLoaded - capture'); // 2nd
    }, true);
    document.addEventListener('DOMContentLoaded', function() {
    console.log('document - DOMContentLoaded - bubble'); // 2nd
    });
    window.addEventListener('DOMContentLoaded', function() {
    console.log('window - DOMContentLoaded - bubble'); // 3rd
    });

    window.addEventListener('load', function() {
    console.log('window - load - capture'); // 4th
    }, true);
    document.addEventListener('load', function() {
    console.log('document - load - capture'); // DOES NOT HAPPEN
    }, true);
    document.addEventListener('load', function() {
    console.log('document - load - bubble'); // DOES NOT HAPPEN
    });
    window.addEventListener('load', function() {
    console.log('window - load - bubble'); // 4th
    });

    window.onload = function() {
    console.log('window - onload'); // 4th
    };
    document.onload = function() {
    console.log('document - onload'); // DOES NOT HAPPEN
    };