Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

Javascript e eventos

1 min read

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:



    Aprendendo sobre eventos
    


    
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 !")
    }
}
Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

One Reply to “Javascript e eventos”

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *