Javascript e eventos

Javascript é uma linguagem que suporta eventos. Um evento pode ser tido como qualquer coisa importante que acontece em nossa página (carregamento da página, clique no botão, etc.). Sendo assim, podemos utilizar Javascript para controlar essas ações.

Para controlarmos os eventos precisamos indicar ao navegador que função deve ser chamada a cada acontecimento. Exemplo para o evento onload (carregamento da página):

onload=function(){
alert("Esse alerta será mostrado após o carregamento da página")
}

A principal utilidade do evento onload é para trabalhar com outros elementos da página. Não é possível trabalhar com os elementos da página antes que os mesmos tenham sido carregados. Por exemplo, observe o seguinte código que não funciona:

    
    


    
Meu texto

Nota:

O método getElementById do objeto document retorna um elemento da página que tenha o atributo id igual ao passado como parâmetro.

O alerta mostrará null, o que faz sentido, visto que o navegador ainda estava na etiqueta head, não tendo passado ainda pela etiqueta body, tampouco a div desejada.

Uma solução não muito boa seria mover a etiqueta script para que se posicionasse depois do elemento desejado, mas nesse caso a organização seria trabalhosa e não seria viável no caso de scripts externos. A solução perfeita nesse caso é o evento onload. Nosso código Javascript pode ficar assim:

onload = function () {
    alert(document.getElementById("MinhaDiv"))
}

Também existem dezenas de outros eventos, mas vamos citar aqui os mais comuns.

Evento onload

Como demonstrado, é amplamente utilizado para verificar se um elemento foi carregado (não necessariamente a página toda)

Evento onclick

É utilizado para capturar o clique em determinado elemento

Evento onfocus

Quando um elemento recebe o foco (seja pelo tab ou clique do usuário)

Evento onchange

Quando o valor do elemento é modificado

Para os exemplos que vamos mostrar, o código da página será o seguinte:

        

            
Campos do formulário

        
    

Com o que foi aprendido, podemos agora utilizar o evento onload da página para atribuir os outros eventos do campo “botao”. O código Javascript pode ficar assim:

onload = function () {
    var elemento = document.getElementById("botao")
    elemento.onfocus = function () {
        alert("Rebeci foco")
    }
    elemento.onchange = function () {
        alert("Fui modificado !")
    }
    elemento.onclick = function () {
        alert("Alguém clicou em mim !")
    }
}