8

Eu posso criar uma função em JavaScript e chamá-la da seguinte forma:

funcaoTeste = function() 
{
	console.log('Ola funcao teste');
};

funcaoTeste();

Para executar a função eu preciso chamar ela funcaoTeste(), entretendo, as vezes eu me deparo com códigos JavaScript em que uma função é executada mas eu não vejo onde ela é chamada.

Veja este exemplo prático de ilustração:

window.onload = function()
{
    document.getElementById('form-exemplo').onsubmit = function (event) 
    {
        if ( CPF.validate(document.getElementById('cpf').value) !== true ) 
        {
            alert("CPF invalido");
            return false;
        }
    };
};

O código acima é referente a este formulário:

<form method="post" id="form-exemplo">
    <label for="nome">Nome </label>
    <input type="text" id="nome" placeholder="Digite o nome" required>

    <label for="cep">CEP </label>       
    <input type="text" id="cep" placeholder="Digite o CEP" required pattern="\d{5}-?\d{3}">

    <label for="cpf">CPF </label>
    <input type="text" id="cpf" placeholder="Digite o CPF" required>

    <input type="submit" value="Enviar">
</form>

Repare que as funções onload() e onsubmit() foram declaradas, porém não existe a chamada delas no script. Parece que isso ocorre de uma forma automática que eu desconheço.

Perguntas

  1. Como uma função é executa automaticamente sem ser chamada?
  2. Quem é responsável por executar as funções onload() e onsubmit()?
1
  • São executadas nos eventos load e submit respectivamente.
    – Maurivan
    Commented 1/04/2017 às 21:10

1 Resposta 1

6

O engine do navegador fará isso. Ele é quem controla toda execução e chama alguns eventos.

O onload é um evento, então quando você joga uma função nele, quando ocorrer a carga da página o engine chamará esta função.

O mesmo ocorre com o onsubmit que é um evento a ser chamado sempre que iniciar a submissão do formulário.

O sistema de eventos é muito útil em todo sistema onde você quer quer controlar a execução, mas dar alguns ganchos (hooks) para que o usuário deste sistema, no caso o programador do script possa personalizar alguma ação específica quando algo ocorre.

No fundo é um callback.

Veja O que é a Programação Orientada a Eventos?. Não considero JS sozinho orientado a eventos, mas todo o engine é.

Como funciona em C#.

No fundo eventos aplicam o padrão de projeto Observer. Como pode ser visto em Design pattern Observer aplicado em eventos.

Também é útil entender o que é inversão de controle que é o que ocorre com o engine JS, a maioria das GUIs e outras aplicações do tipo framework.

Coloquei no GitHub para referência futura.

2
  • Isso só ocorre com eventos, certo?
    – gato
    Commented 1/04/2017 às 21:20
  • 1
    Ocorre com callbacks em geral. Não estou tão por dentro do JS para afirmar isto, mas eu acho que que todos os callbacks padrões do JS em navegadores são eventos.
    – Maniero
    Commented 1/04/2017 às 21:21

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 .