Eventos do JavaScript

Os eventos HTML são "o que acontece" em um elemento HTML.

Quando se usa JavaScript em uma página HTML, o JavaScript pode "responder" a esses eventos.

Eventos HTML

Os eventos HTML podem ser algo que o navegador ou o usuário faz.

A seguir estão alguns exemplos de eventos HTML:

  • A página HTML é carregada
  • O campo de entrada HTML é modificado
  • O botão HTML é clicado

Normalmente, quando um evento ocorre, o usuário deseja fazer algo.

JavaScript permite que você execute código quando um evento for detectado.

Através do código JavaScript，HTML permite que você adicione manipuladores de eventos a elementos HTML.

Use aspas simples:

<element event='Alguns JavaScript>

Use aspas duplas:

<element event="Alguns JavaScript">

No exemplo a seguir:onclick Atributo (e código) adicionado a <button> Elemento:

Exemplo

<button onclick='document.getElementById("demo").innerHTML=Date()'>O que é a hora atual?</button>

Experimente você mesmo

No exemplo acima, o código JavaScript alterou o conteúdo do elemento com id="demo".

No próximo exemplo, o código (usando this.innerHTML）modificou o conteúdo de seu próprio elemento:

Exemplo

<button onclick="this.innerHTML=Date()">O que é a hora atual?</button>

Experimente você mesmo

O código JavaScript geralmente tem muitas linhas. A chamada de função de atributo de evento é mais comum:

Exemplo

<button onclick="displayDate()">O que é a hora atual?</button>

Experimente você mesmo

Eventos HTML comuns

A seguir, alguns eventos HTML comuns:

evento descrição
onchange O elemento HTML foi alterado
onclick O usuário clicou no elemento HTML
onmouseover O usuário moveu o mouse para dentro do elemento HTML
onmouseout O usuário moveu o mouse para fora do elemento HTML
onkeydown O usuário pressionou uma tecla do teclado
onload O navegador já completou o carregamento da página

Lista mais completa:Manual de Referência CodeW3C.com JavaScript DOM HTML Eventos.

O que o JavaScript pode fazer?

Os manipuladores de eventos podem ser usados para lidar com, validar entrada do usuário, ações do usuário e ações do navegador:

  • O que deve ser feito sempre que a página for carregada
  • O que deve ser feito quando a página for fechada
  • Ação que deve ser executada quando o usuário clicar no botão
  • Conteúdo que deve ser verificado quando o usuário inserir dados
  • etc.

Existem muitas maneiras diferentes de fazer o JavaScript lidar com eventos:

  • As propriedades de evento HTML podem executar código JavaScript
  • As propriedades de evento HTML podem chamar funções JavaScript
  • Você pode atribuir suas próprias funções de manipulador de eventos a elementos HTML
  • Você pode impedir que um evento seja enviado ou tratado
  • etc.

Você aprenderá mais sobre eventos e manipuladores de eventos no capítulo HTML DOM.