What is the difference between window.onload() and document.addEventListener('load', ..)?

Question

It seems to me that both events are fired when every resource and its dependent resources have finished loading. This rises some questions:

Is there any difference between those events?
Which event gets fired first?
Which event could or should be preferred for adding an additional HTML element to the body after everything has been finished loading?

score 15 · Accepted Answer · edited Apr 21 '22 at 05:52

15

As you say, they both do exactly the same thing. The advantage of addEventListener is that you can add more than one event listener to the load event.
From some basic testing, it seems the listeners get called in the order they were set, though I don't know how reliable that is.
You can use either method to do whatever you need.

edited Apr 21 '22 at 05:52

Audwin Oyong

answered Jul 21 '16 at 09:24

Whothehellisthat

No, they are handled different. The simple onload function can be overwritten, and it seems like it's executed first. The eventListeners get stacked, and all of them are executed. Spent like 3 hours debugging a script. It used a simple window.onload, which was later overwritten with another script, so the first script's onload never executed. Check this example: https://jsfiddle.net/ag4snbpz/ - So please, avoid using pure onload, onclick etc. methods! – David58 May 31 '23 at 17:31

score 5 · Answer 2 · edited Feb 23 '20 at 16:57

5

They do NOT do exactly the same thing, at least in Firefox.

The reason is that window.onload is equivalent to window.addEventListener("load"), not document.addEventListener("load").

Although, all documentation I have seen says that they are equivalent.

edited Feb 23 '20 at 16:57

Abandoned Cart

answered Jul 24 '16 at 09:05

JPL

1

What you are pointing out is valid, albeit common sense. In 99.9% of all situations, the document and window being fully loaded occurs at nearly the same time. – Abandoned Cart Feb 23 '20 at 16:59

score 0 · Answer 3 · answered Jul 21 '16 at 09:23

1- From what I know adding an event listening gives you more freedom especially in removing the controls you added

2- Nothing I know about that. But I assume it shouldn't be a big difference

3- The EventListener allows you to control the element and remove the control at will and thus should be more useful

3 Answers3