Javascript load vs ready vs domready vs DOMContentLoaded events

Question

I am a bit lost in the \"start up\" events - there are so many different events and are named differently in the DOM and in various frameworks like jQuery. What are all

Answer 1

It is better to think from the perspective of what you want and which browsers to support.

To make manipulations in Document Object Model (DOM) you will have to make sure the HTML page is loaded over network and parsed into a tree. One way of tackling this is by writing all code at end of the HTML file which leads to processing those javascript only after parsing the HTML. The other newer standard way is to listen for the DOMReady or DOMContentLoaded event or ready event to make sure the handler is run only after DOM is ready

After DOM tree is built browser will request for images, audio, video etc. After all these resources are loaded window load event is fired ,now the page is ready to be rendered fully.

So basically you should just think if your code can be executed with the DOM tree ready, or do you need everything loaded to run your code. If the native javascript implementation of DOM ready doesnt cover all the browsers you need to support, you can go for jQuery DOMready that is the reason why its made.