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

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?

Audwin Oyong · Accepted Answer · 2022-04-21 05:52:37Z

18

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, 2022 at 5:52

Audwin Oyong

2,5273 gold badges21 silver badges37 bronze badges

answered Jul 21, 2016 at 9:24

Whothehellisthat

2,1521 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David58 Over a year ago

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: jsfiddle.net/ag4snbpz - So please, avoid using pure onload, onclick etc. methods!

Abandoned Cart · Accepted Answer · 2020-02-23 16:57:38Z

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.

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.

Zaid Al Shattle · Accepted Answer · 2016-07-21 09:23:29Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related