Atributos de eventos

  1. Eventos de formulários
  2. Eventos de teclados
  3. Window events
  4. Eventos de mouse
  5. Drag events
  6. Eventos de clipboard
  7. Eventos de mídia
  8. Uso em atributos

Nesse tutorial, serão mostrados os principais eventos, e como usá-los em atributos HTML. Os eventos estão separados por categorias, para que eles possam ser encontrados mais facilmente e para facilitar a sua compreensão.

Eventos de formulários

Evento Descrição
blur Ocorre quando o elemento perde foco
change Ocorre quando o valor do elemento muda
focus Ocorre quando o elemento ganha foco
input Acontece quando o elemento obtém input do usuário
reset Acontece quando o botão Resetar de um formulário é clicado
select Acontece quando algum texto é selecionado em um elemento
submit Acontece quando um formulário é submetido

Eventos de teclado

Evento Descrição
keydown Ocorre quando o usuário pressiona uma tecla
keypress Ocorre quando o usuário pressiona uma tecla que produz um valor de caractere. Assim, pressionar teclas como Alt e Ctrl não aciona esse evento.
keyup Ocorre quando o usuário solta uma tecla

Window events

Evento Descrição
error Ocorre quando acontece um erro
hashchange Ocorre quando a parte da âncora da URL muda
load Ocorre depois que o carregamento da página termina
offline Ocorre quando o browser começa a trabalhar offline
online Ocorre quando o browser começa a trabalhar online
pagehide Ocorre quando o usuário navega pra fora da página
pageshow Ocorre quando o usuário navega dentro da página
resize Ocorre quando a janela do navegador é redimensionada

Eventos de mouse

Evento Descrição
click Ocorre quando o usuário clica em um elemento
dblclick Ocorre quando o usuário dá um clique duplo em um elemento
mousedown Ocorre quando o botão do mouse está pressionado em um elemento
mousemove Ocorre quando o mouse se move sobre um elemento
mouseout Ocorre quando o mouse se move fora de um elemento
mouseover Ocorre quando o mouse está sobre um elemento, esteja ele se movendo ou não
mouseup Ocorre quando o usuário solta o botão do mouse em um elemento
wheel Ocorre quando a bolinha do mouse é usada sobre um elemento

Drag events

Evento Descrição
drag Ocorre quando um elemento está sendo arrastado
dragend Ocorre quando um elemento para de ser arrastado
dragenter Ocorre quando um elemento arrastado entra em um local onde ele pode ser solto
dragleave Ocorre quando um elemento arrastado sai de um local onde ele pode ser solto
dragover Ocorre quando um elemento está sendo arrastado sobre um local onde ele pode ser solto
dragstart Ocorre quando um elemento começa a ser arrastado
drop Ocorre quando um elemento está sendo solto
scroll Ocorre quando a barra de rolagem de um elemento está sendo usada

Clipboard events

Evento Descrição
copy Ocorre quando o contéudo de um elemento é copiado pelo usuário
cut Ocorre quando o conteúdo de um elemento é recortado pelo usuário
paste Ocorre quando o usuário cola algum conteúdo em um elemento

Media events

Evento Descrição
ended Ocorre quando o conteúdo da mídia chegou ao fim
error Ocorre quando acontece um erro no carregamento do arquivo
loadstart Ocorre quando a mídia está prestes a ser carregada
pause Ocorre quando a mídia é pausada
play Ocorre quando a mídia está pronta para ser reproduzida
playing Ocorre quando a mídia está sendo reproduzida
waiting Ocorre quando a mídia pausou porque está esperando alguma coisa, geralmente quando ela está baixando o restante do seu conteúdo para continuar sua reprodução.

Uso em atributos

Os eventos que você viu são disparados para que o desenvolvedor possa fazer algo quando eles acontecem. Quando o desenvolvedor quer fazer algo quando um evento acontece, ele programa o que ele quer fazer em Javascript. E é possível colocar o código em Javascript que deve ser executado quando um evento acontece em atributos de HTML. Basta usar o prefixo on seguido pelo evento que você quer escutar e fazer algo quando ele acontecer. Exemplo:

<button class="adicionar-usuario" onclick="adicionarUsuario()">Adicionar usuário</button>

Esse elemento chama a função adicionarUsuario() de Javascript quando o evento click ocorre no botão "Adicionar usuário". Não se preocupe se você não entendeu isso. Se você não sabe Javascript ou não teve nenhum contato com uma linguagem de programação, você não vai entender. Mas, para aqueles que programam em Javascript, é importante conhecer esse recurso de executar um código quando um evento acontece em um elemento, indicando o código em um atributo de HTML. Há outras formas de fazer a mesma coisa, mas elas não são mostradas porque estão fora do escopo desses tutoriais, que é HTML.