Eventos

Quando acontece alguma ação no sistema estamos nos deparando com um evento.
O sistema irá disparar algum tipo de sinal quando o evento acontecer.

Exemplo de eventos:

• Ao clicar com o mouse sobre um elemento ou passar o cursor sobre o mesmo.

• Ao pressionar uma tecla do teclado.

• Ao redimensionar ou fechar a janela do browser.

• Ao terminar de carregar a página.

• Ao fazer um submit em um formulário.

• Ao reproduzir, interromper ou encerrar um vídeo.

• Ao retornar um erro.

Terminologia

Eventos são disparados ou propagados

Quando um evento ocorre, muitas das vezes ele é descrito como tendo sido disparado ou propagado.

Eventos disparam scripts

Diz-se que eventos disparam uma função ou script.

Podemos definir um evento em 3 passos:

Passo 1: Selecione o elemento
Passo 2: Especifique o evento
Passo 3: Chame o código

Há três tipos de rotinas de tratamento de evento

• Rotinas de tratamento de evento HTML

  Essa é uma prática ruim, mas você precisa estar ciente dela porque talvez você a veja em códigos mais antigos.

• Rotinas DOM tradicionais

  Rotinas de tratamento de evento DOM foram introduzidas na especificação original do DOM.

  Elas são consideradas melhores que as rotinas de tratamento de evento HTML porque permitem separar o JavaScript da HTML.

• Ouvintes de eventos DOM nível 2

  Os ouvintes de evento foram introduzidos em um atualização da especificação DOM. Eles agora são a maneira preferível de manipular eventos.

Rotinas de tratamento de evento HTML

As versões anteriores da HTML incluíam um conjunto de atributos que podiam responder a eventos no elemento ao qual eles eram adicionados.

O código abaixo indica que, quando clicar nesse elemento <a> a função alert() seria invocada.

Exemplo

<a onclick="alert('Você clicou no botão e exibiu esse alerta');">click here</a>

Copie e cole o código no codepen para visualizar o resultado. https://codepen.io/

Rotinas de tratamento de evento DOM / Event handler

É um bloco de código que será executado quando o evento for disparado.

Exemplo

<button>Click here</button>

function showMessage() {
    alert('Você clicou no botão e exibiu esse alerta');
}
var btn = document.querySelector('button');

btn.onclick = showMessage;

Copie e cole o código no codepen para visualizar o resultado. https://codepen.io/

Ouvintes de evento / Event listener

Escutam o evento acontecendo, e o manipulador é o código que roda em resposta a este acontecimento.

Exemplo

<button>Click here</button>

var btn = document.querySelector('button');

btn.addEventListener('click',function() {
    alert('Você clicou no botão e exibiu esse alerta');
}, false);

Copie e cole o código no codepen para visualizar o resultado. https://codepen.io/

Diferentes tipos de evento

Eventos de IU

• load

  A página terminou de carregar.

• unload

  A página está carregando.

• error

  O navegador encontra um erro de JavaScript.

• resize

  A janela do navegador foi redimensionada.

• scroll

  O usuário rolou a página para cima ou para baixo.

---

Eventos de teclado

• keydown

  O usuário pressiona uma tecla (repete enquanto a tecla é pressionada).

• keyup

  O usuário solta uma tecla.

• keypress

  Caracteres estão sendo inseridos (repete enquanto a tecla é pressionada).

---

Eventos de mouse

• click

  O usuário pressiona e solta um botão sobre o mesmo elemento.

• dbclick

  O usuário pressiona e solta um botão duas vezes sobre o mesmo elemento.

• mousedown

  O usuário pressiona um botão do mouse sobre um elemento.

• mouseup

  O usuário solta um botão do mouse sobre um elemento.

• mousemove

  O usuário move o mouse (não em uma tela sensível ao toque).

• mouseover

  O usuário move o mouse para cima de um elemento (não em uma tela sensível ao toque).

• mouseout

  O usuário move o mouse para fora de um elemento (não em uma tela sensível ao toque).

---

Eventos focus

• focus / focusin

  O elemento ganha o foco.

• blur / focusout

  O elemento ganha o foco.

---

Eventos de formulário

• input

  O valor de um elemento ou ou é alterado.</p> </body>

• change

  O valor em uma caixa de seleção/verificação ou radio button muda.

• submit

  O usuário envia um formulário.

• reset

  O usuário clica no botão reset de um formulário.

• cut

  O usuário corta o conteúdo de um campo de formulário.

• copy

  O usuário copia o conteúdo de um campo de formulário.

• paste

  O usuário cola o conteúdo de um campo de formulário.

• select

  O usuário seleciona um texto em um campo de formulário.

Eventos de mutação

• DomSubtreeModified

  Uma alteração foi feita no documento.

• DomNodeInserted

  Um nó foi inserido como um filho direto de outro nó.

• DomNodeRemoved

  Um nó foi removido a partir de outro nó.

• DomNodeInsertedIntoDocument

  Um nó foi inserido como um descendente de um outro nó.

• DomNodeRemovedFromDocument

  Um nó foi removido como um descendente de um outro nó.

---

O objeto event

Quando um evento ocorre, o objeto event exibe informações sobre o evento.

<a href='#' id='user'>click</a>

function clickElement(e) {
    let target = e.target;
  console.log(target);
    // OUTPUT: "<a href='#' id='user'>click</a>"
    console.log(e);
    // OUTPUT: MouseEvent {isTrusted: true, screenX: 2848, screenY: -1, clientX: 1568, clientY: 288, …}
}

var el = document.getElementById('user');
el.addEventListener('click', clickElement, false);

Objeto Event

• target

  O alvo do evento.

• type

  Tipo do evento que foi disparado.

• cancelable

  Se você pode cancelar o comportamento padrão de um elemento.

---

Objeto Event

• preventDefault

  Cancelar o comportamento padrão do evento.

• stopPropagation

  Impede que o evento se propague ou seja capturado novamente.

Referência de eventos