Eventos em Javascript

Eventos em Javascript são disparados por alguma ação, tanto do usuário quanto do seu código, tais como um clique com o mouse, uma tecla do teclado pressionada, entrar ou sair de um campo de um formulário, e assim por diante.

Qualquer evento em Javascript pode ser capturado e tratado por manipuladores de eventos, que, por sua vez, aceitam uma função para detalhar o que será feito quando tal evento for disparado.

Por exemplo, você pode disparar um alerta na tela do navegador quando o usuário clicar em determinada área do HTML do seu site.


Um dos problemas que você vai enfrentar muito daqui em diante, será o problema da diferença entre os navegadores. Infelizmente, os navegadores (principalmente o Internet Explorer) apresentam algumas diferenças que devem ser dribladas com alguns truques no seu código. Felizmente, vou detalhar tudo o que você precisa saber para manipular eventos em todos os navegadores, incluindo os mais antigos, que nem são suportados mais por sites como YouTube, por exemplo, tais como IE6 e IE7.

Vou detalhar métodos antigos e novos para manipulação de eventos em Javascript, isso porque você deve entender como os eventos funcionam e o porquê você deve driblar as diferenças entre os navegadores.

Por este motivo, vamos iniciar do mais básico, que continua funcionando na maioria dos navegadores mais novos, até os métodos usados atualmente para manipular tais eventos.

Eventos em Javascript são categorizados em três áreas distintas pela W3C: interface de usuário (teclado e mouse), lógica (resultante de um processo qualquer) e mutação (ação que altera determinada área do documento).

Dentro os eventos que podem ser utilizados, temos os seguintes:

abort – Quando uma imagem não pode ser carregada
blur, focus – Quando entra ou sai de um campo do formulário
change – Quando altera o valor de uma opção do formulário
click, dbclick – Um ou dois cliques com o mouse
contextmenu – Clique com o botão direito do mouse
error – Quando a página ou uma imagem não pode ser carregada
keydown, keyup, keypress – Pressionar, soltar, ou pressionar e soltar uma tecla do teclado
load, unload – Quando a página termina de ser carregada, ou ao sair da página
mousedown, mouseup – Pressionar e soltar o mouse
mouseover, mouseout – Quando o mouse está sobre algo; quando o mouse deixa de estar sobre algo
reset – Zerar os campos do formulário
resize – A janela é redimensionada
select – Seleção de texto
scroll – Quando rola a página
submit – Quando envia um formulário

Como você pôde perceber, existem milhares de eventos (e outros além dos descritos) para cada ação do usuário na página. Cada um desses eventos têm suas propriedades, que podem ser acessadas para que sua aplicação faça algo interessante.

Com o decorrer dos post, vamos colocar exemplos de eventos Javascript, espero que tenham gostado, até a próxima.