The top Google hit for javascript addeventlistener load was jQuery based and therefore not relevant to me, I want a clean reference of how to best bind an event to a document's ready state in vanilla javascript.
Asked
Active
Viewed 1,173 times
0
-
If you want to see exactly how to use the `readyState` to know when the DOM is ready in plain javascript across many different generations of browsers, see this answer which has a ready to use function that uses the `readyState` and the `DOMContentLoaded` event: http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the/9899701#9899701 – jfriend00 Apr 17 '14 at 03:59
-
Thank you jsfriend00, and indeed everyone else who has posted on this thread. I'm excited to know there are so many colorful variants! – ThorSummoner Apr 17 '14 at 04:21
2 Answers
2
how to best bind an event to a document's ready state
That would probably be...
document.addEventListener("DOMContentLoaded", function() { });
![](../../users/profiles/31671.webp)
alex
- 438,662
- 188
- 837
- 957
0
MDN's Reference for Events show the load event being the desired trigger. This post explains not to bind to the document
node, rather to bind to the window
node.
window.addEventListener('load', function(){ console.log('document ready!'); });
![](../../users/profiles/-1.webp)
Community
- 1
- 1
![](../../users/profiles/1695680.webp)
ThorSummoner
- 12,194
- 11
- 114
- 129
-
That's a different event to *document ready*. I'd call that *all stuff has downloaded*. – alex Apr 17 '14 at 03:54