Atributos de eventos
- Eventos de formulários
- Eventos de teclados
- Window events
- Eventos de mouse
- Drag events
- Eventos de clipboard
- Eventos de mídia
- 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.
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 |
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.