0

A propriedade

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

Só pode ser em um script? Vou dar um exemplo para o melhor entendimento.

Se eu tenho 3 scripts chamados:

mail.js
teste.js
algo.js

e os três (separadamente) eu coloco:

mail.js

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

teste.js

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

algo.js

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

na hora de eu carregar meu html e colocar:

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

    <body></body>
</html>

Serão executados todos os scripts mesmo a propriedade se repetindo? Estou fazendo essa pergunta pq meu exemplo real talvez esteja dando isso e não executando os outros (executa apenas o primeiro, e os outros dois ficam de fora).

PS: Caso o entendimento dessa pergunta não seja esclarecedor o suficiente tentarei modificar para que possa ficar mais claro.

3
  • Não tenho certeza, mas toda vez que você faz window.onload = alugmaFuncao() ele deixa de executar para os anteriores, nesse caso o recomendado seria usar window.addEventListener('load', funcao) 15/04/2019 às 13:38
  • Fiz uns testes e é isso mesmo, falta achar uma boa referência explicando o motivo, mas resumidamente é por que só pode haver uma função no window.onload, ao chamar de novo com outra função a anterior é substituída, o addEventListener não tem esse problema 15/04/2019 às 13:43
  • Nossa, que estranho. Obrigado por responderem, mas ainda fico na dúvida... pq se eu não uso essa função nos meus scripts ele não executa, se eu usasse algo como constantes e variaveis fazendo uma validação em mail.js e em test.js e usasse algo como validar outro formulario, não executaria nenhum dos dois. 15/04/2019 às 13:49

1 Resposta 1

2

Com window.onload você só pode usar uma função, ao chamar de novo com uma nova função a antiga não será mais executada quando o evento ocorrer, no seu caso apenas a última seria executada

Você pode usar o addEventListener, ele recebe o tipo de evento a ser escutado e a função a ser executa, a diferença é que você pode chamar várias vezes sem problemas

addEventListener() is the way to register an event listener as 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.

O principal beneficio no seu caso seria

It allows adding more than a single handler for an event

O que vai lhe permitir adicionar funções que seriam executadas no fim do carregamento do página sem problemas

Segue abaixo exemplo do funcionamento:

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
})

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .