17. Novos eventos DOM
Uma palavra sobre eventos
O suporte ao tratamento de eventos disparados pelo usuário é parte essencial do DOM. HTML5 oferece a você um extenso conjunto de novos eventos. Vamos dar uma olhada nos mais interessantes:
Elementos multimídia:
- oncanplay
- O elemento audio ou video já tem dados suficientes no buffer para começar a tocar.
- oncanplaythrough
- O elemento audio ou video já tem dados suficientes no buffer para começar a tocar e, se a tranferência de dados continuar no ritmo em que está ocorrendo, estima-se que tocará até o final sem interrupções.
- ondurationchange
- O elemento audio ou video teve seu atributo
durationmodificado. Isso acontece, por exemplo, ao alterar a origem da mídia. - onemptied
- O elemento audio ou video teve um erro de retorno vazio de dados da rede. O retorno vazio acontece quando, por exemplo, você tenta invocar o método play de um elemento que ainda não tem uma origem de mídia definida.
- onended
- O vídeo ou áudio chegou ao fim.
- onloadeddata
- Os dados começaram a ser carregados e a posição atual de playback já pode ser renderizada.
- onloadedmetadata
- Os metadados foram carregados. Já sabemos as dimensões, formato e duração do vídeo.
- onloadstart
- Os dados começaram a ser carregados.
- onpause
- O usuário clicou em pause.
- onplay
- O usuário clicou em play ou o playback começou por causa do atributo
autoplay - onplaying
- O vídeo ou áudio está tocando.
- onprogress
- O agente de usuário está buscando dados do vídeo ou áudio.
Eventos em campos de formulário:
- oninput
- O usuário entrou com dados no campo
- oninvalid
- O campo não passou pela validação
Eventos gerais:
- oncontextmenu
- O usuário disparou um menu de contexto sobre o objeto. Na maioria dos sistemas Desktop, isso significa clicar com o botão direito do mouse ou segurando uma tecla especial.
- onmousewheel
- A rodinha do mouse foi acionada.
- onbeforeprint
- Disparado antes da impressão da página. Você pode usá-lo para modificar, esconder ou exibir elementos, preparando a página para impressão.
- onafterprint
- Disparado após a impressão da página. Você pode usá-lo para reverter o status anterior à impressão.
- onhashchange
- A última porção da URL, após o hash (#), foi modificada.
- onoffline
- O agente de usuário ficou offline.
- ononline
- O agente de usuário está novamente conectado.
- onredo
- O usuário disparou a ação de "Refazer".
- onundo
- O usuário disparou a ação de "Desfazer".
Drag-and-drop:
Vimos a definição desses eventos no Capítulo 10:
- ondrag
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondragstart
- ondrop
Atributos de evento
A especificação do HTML5 padronizou um formato de atribuição de eventos que já era amplamente utilizado. Você pode atribuir eventos através de atributos HTML com o nome do evento. Por exemplo:
<input onblur="return verifica(this)" />
É claro que você pode continuar usando o método do DOM addEventListener, com a vantagem de poder atribuir vários listeners ao mesmo evento.