Last active
July 3, 2023 14:10
-
-
Save jsonberry/0d71007ea188785e1a3d13d2e30d58a5 to your computer and use it in GitHub Desktop.
Window vs. Document Loading Events
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment