window.onload property interferes with loading several scripts?

Asked

Viewed 828 times

0

The estate 

window.onload () = () => {
  //Executa algo
}

Can it only be in a script? Let me give an example for the best understanding.

If I have 3 scripts called:

mail js.
js test.
something.js

and the three (separately) I put:

mail js.

window.onload () = () => {
  //Função de mail.js
  alert("Teste 1");
}

js test.

window.onload () = () => {
  //Função de teste.js
  alert("Teste 2");
}

something.js

window.onload () = () => {
  //Função de algo.js
  alert("Teste 3");
}

when I load my html and put:

<!Doctype HTML>
  <html>
    <head>
       <script src="mail.js">
       <script src="teste.js">
       <script src="algo.js">
    </head>

    <body></body>
</html>

Will all scripts be executed even if the property is repeated? I am asking this question because my real example may be giving this and not running the others (runs only the first, and the other two are left out).

PS: If the understanding of this question is not enlightening enough I will try to modify it so that it can be clearer.

javascript html script

  • I’m not sure, but every time you do window.onload = alugmaFuncao() it fails to perform for the previous ones, in which case the recommended would be to use window.addEventListener('load', funcao)

  • I did some tests and that’s right, I still find a good reference explaining the reason, but briefly is why there can only be a function in the window.onload, when calling again with another function the previous one is replaced, the addEventListener doesn’t have that problem

  • Wow, that is weird. Thanks for answering, but I still wonder... if I don’t use this function in my scripts it doesn’t run, if I use something as constants and variables doing a validation in mail.js and test.js and using something like validating another form, I wouldn’t run either of the two.

1 answer

2


With window.onload you can only use a function, when calling again with a new function the old one will no longer be executed when the event occurs, in your case only the last one would be executed

You can use the addeventlistener, it receives the type of event to be listened to and the function to be executed, the difference is that you can call several times without problems

addeventlistener() is the way to Register an Event specified in W3C DOM. The Benefits are as Follows:

  • It Allows Adding more than a single Handler for an Event. This is particularly Useful for AJAX Libraries, Javascript modules, or any other Kind of code that needs to work well with other Libraries/Extensions.

  • It gives you Finer-grained control of the Phase when the Listener is Activated (capturing vs. Bubbling).

  • It Works on any DOM element, not just HTML Elements.

The main benefit in your case would be

It Allows Adding more than a single Handler for an Event

This will allow you to add functions that would be executed at the end of page loading without problems

Below is an example of how it works:

window.onload = function() {
    console.log('função 1 com onload')
    // Esse não vai funcionar, foi sobrescrito na linha 6
}

window.onload = function() { // Sobrescreve função a ser executada
    console.log('função 2 com onload')
}

window.addEventListener('load', function() {
    console.log('função 3 com eventListener')
    // Esse vai funcionar, é adiicionado apenas
})

window.addEventListener('load', function() {
    console.log('função 4 com eventListener')
    // Também é adicionado, não impede o funcionamento do anterior
})

Browser other questions tagged javascript html script

You are not signed in. Login or sign up in order to post.