Difference between onload and addEventListener – Javascript

by Posted on

Learn the difference between onload and addEventListener event listeners in Javascript. If you are creating a website and you want to perform some action in Javascript when the page is fully loaded, there are 2 ways to do this:

  1. window.onload
  2. window.addEventListener

Both are the events which are called when the page is fully loaded. But there is a big difference that matters when you are creating large projects. Difference is that, window.onload event will only be called once, and it will override the previously attach onload event. While on the other hand, using window.addEventListener you can add as many functions as you want and they will all be called in parallel.

For example, take the following code:

// Using window.onload event twice
window.onload = function () {
    console.log("onload 1");
};

window.onload = function () {
    console.log("onload 2");
};

// Using window.addEventListener event twice
window.addEventListener("load", function () {
    console.log("addEventListener 1");
});

window.addEventListener("load", function () {
    console.log("addEventListener 2");
});

We are attaching first onload event and are displaying “onload 1” in browser console. Second onload event will display the message “onload 2” in console. Similarly, we added 2 events but this time using addEventListener function. The first parameter will be the name of event which is “load”, and second will be the function that will be called.

Results

You will see that we are calling both events 2 times to see which one called twice. If you run the above code in your Javascript file, you will see the following lines in your console:

This is because the window.onload is an attribute, like a variable. When you use this event 2nd time, then its previous function is replaced by the new one. Same as like you update the variable’s value. You can notice that the syntax is window.onload = function () {} which means that it is an attribute whose value can be replaced.

On the other hand, window.addEventListener you can see that it is a function. You can tell because it has parenthesis () and we know that if there is an parenthesis at the end of any name then it must be a function. You can also see that it has 2 parameters, functions does has parameters too. So when you call this event and pass your function in the second parameter, it will be placed in a stack of “load” events. That is why all functions of addEventListener are called without overriding.

Conclusion

We highly recommend that you should make your habit of using the window.addEventListener as it is more reliable. Because it happens sometimes that your window.onload function was not being called and you wonder why it is not being called, and the reason is simple: “Somewhere else in the code this attribute is being overriden by another function”.

Hopefully you would have known the difference between onload and addEventListener now.

If you find this article helpful, please do share with others. So, if someone else is having this problem or confusion, then it can be solved.

Post Views: 169

Published by adnanafzal565