Javascript e eventos | Zoom Digital : Reviews de Smartphones, Tutoriais, Notícias

Javascript e eventos

Por Philipe Cardoso
Categoria: Tecnologia
nov 30th, 2009
1 Comentário
462 Views

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

About "" Has 2042 Posts

23 anos, Carioca, Criador do Portal Zoom Digital, mantém desde a epoca que possuia formato de blog, Podcaster oficial do Zoom Cast. Amante por todo tipo de tecnologia e formado como técnico de informática.

One Response to “Javascript e eventos”

  1. […] de formulário simples No artigo anterior, Javascript e eventos, expliquei a importância dos eventos para as linguagens client-side. Ter conhecimento dos eventos […]

Deixe uma resposta

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