Resumo : neste tutorial, você aprenderá sobre eventos JavaScript, modelos de eventos e como lidar com eventos.
Introdução aos eventos JavaScript
Um evento é uma ação que ocorre no navegador da web, que o navegador envia para você para que você possa responder a ela.
Por exemplo, ao clicar em um botão em uma página da Web, você pode responder a esse click
evento exibindo uma caixa de diálogo .
Cada evento pode ter um manipulador de eventos que é um bloco de código que será executado quando o evento ocorrer.
Um manipulador de eventos também é conhecido como ouvinte de eventos. Ele escuta o evento e executa quando o evento ocorre.
Suponha que você tenha um botão com o id btn
:
<button id="btn">Click Me!</button>
Linguagem de código: HTML, XML ( xml )
Para definir o código que será executado quando o botão for clicado, é necessário registrar um manipulador de eventos utilizando o addEventListener()
método:
let btn = document.querySelector('#btn');
function display() {
alert('It was clicked!');
}
btn.addEventListener('click',display);
Linguagem de código: JavaScript ( javascript )
Como funciona.
- Primeiro, selecione o botão com o id
btn
usando oquerySelector()
método. - Em seguida, defina uma função chamada
display()
como manipulador de eventos. - Por fim, registre um manipulador de eventos usando o
addEventListener()
para que quando o usuário clicar no botão, adisplay()
função seja executada.
Uma maneira mais curta de registrar um manipulador de eventos é colocar todo o código em uma função anônima , como esta:
let btn = document.querySelector('#btn');
btn.addEventListener('click',function() {
alert('It was clicked!');
});
Linguagem de código: JavaScript ( javascript )
Fluxo de eventos
Supondo que você tenha o seguinte documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>JS Event Demo</title>
</head>
<body>
<div id="container">
<button id='btn'>Click Me!</button>
</div>
</body>
Linguagem de código: HTML, XML ( xml )
Ao clicar no botão, você clica não apenas no botão, mas também no contêiner do botão, no div
e em toda a página da web.
O fluxo de eventos explica a ordem em que os eventos são recebidos na página do elemento onde o evento ocorre e propagados pela árvore DOM.
Existem dois modelos principais de eventos: bolha de eventos e captura de eventos.
Borbulhamento de eventos
No modelo de bolha de eventos, um evento começa no elemento mais específico e depois flui para cima em direção ao elemento menos específico (o document
ou par window
).
Ao clicar no botão, o click
evento ocorre na seguinte ordem:
- botão
- div com o contêiner de id
- corpo
- HTML
- documento
O click
evento ocorre primeiro no botão que é o elemento que foi clicado. Em seguida, o click
evento sobe na árvore DOM, disparando em cada nó ao longo do caminho até atingir o document
objeto.
A imagem a seguir ilustra o efeito de bolha do evento quando os usuários clicam no botão:
Observe que os navegadores modernos espalham o evento até o window
objeto.
Captura de eventos
No modelo de captura de eventos, um evento começa no elemento menos específico e flui para baixo em direção ao elemento mais específico.
Ao clicar no botão, o click
evento ocorre na seguinte ordem:
- documento
- HTML
- corpo
- div com o contêiner de id
- botão
A imagem a seguir ilustra o efeito de captura de eventos:
Fluxo de eventos DOM nível 2
Os eventos de nível 2 do DOM especificam que o fluxo de eventos tem três fases:
- Primeiro, ocorre a captura de eventos, o que oferece a oportunidade de interceptar o evento.
- Então, o destino real recebe o evento.
- Finalmente, ocorre o borbulhamento do evento, o que permite uma resposta final ao evento.
A imagem a seguir ilustra o modelo de evento DOM Nível 2 quando os usuários clicam no botão:
Objeto de evento
Quando o evento ocorre, o navegador passa um Event
objeto para o manipulador de eventos:
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
console.log(event.type);
});
Linguagem de código: JavaScript ( javascript )
Saída:
'click'
Linguagem de código: JavaScript ( javascript )
A tabela a seguir mostra as propriedades e métodos mais comumente usados do event
objeto:
Propriedade/Método | Descrição |
---|---|
bolhas | verdadeiro se o evento borbulhar |
cancelável | true se o comportamento padrão do evento puder ser cancelado |
alvo atual | o elemento atual no qual o evento está disparando |
padrãoPrevenido | retorne verdadeiro se preventDefault() tiver sido chamado. |
detalhe | mais informações sobre o evento |
fase do evento | 1 para fase de captura, 2 para alvo, 3 para borbulhamento |
preventDefault() | cancelar o comportamento padrão do evento. Este método só é eficaz se a cancelable propriedade for verdadeira |
pararPropagação() | cancelar qualquer captura ou borbulhamento de evento adicional. Este método só pode ser usado se a bubbles propriedade for verdadeira. |
alvo | o elemento alvo do evento |
tipo | o tipo de evento que foi disparado |
Observe que o event
objeto só pode ser acessado dentro do manipulador de eventos. Depois que todos os manipuladores de eventos forem executados, o objeto de evento será automaticamente destruído.
preventDefault()
Para evitar o comportamento padrão de um evento, você usa o preventDefault()
método.
Por exemplo, quando você clica em um link, o navegador direciona você para a URL especificada no href
atributo:
<a href="https://tutorials.acervolima.com/tutorial-de-javascript">JS Tutorial</a>
Linguagem de código: HTML, XML ( xml )
No entanto, você pode evitar esse comportamento usando o preventDefault()
método do event
objeto:
let link = document.querySelector('a');
link.addEventListener('click',function(event) {
console.log('clicked');
event.preventDefault();
});
Linguagem de código: JavaScript ( javascript )
Observe que o preventDefault()
método não impede que o evento borbulhe no DOM. Um evento pode ser cancelado quando sua cancelable
propriedade for true
.
pararPropagação()
O stopPropagation()
método interrompe imediatamente o fluxo de um evento através da árvore DOM. No entanto, isso não interrompe o comportamento padrão do navegador.
Veja o exemplo a seguir:
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
console.log('The button was clicked!');
event.stopPropagation();
});
document.body.addEventListener('click',function(event) {
console.log('The body was clicked!');
});
Linguagem de código: JavaScript ( javascript )
Sem o stopPropagation()
método, você veria duas mensagens na janela Console.
No entanto, o click
evento nunca chega a body
porque the stopPropagation()
foi chamado no click
manipulador de eventos do botão.
Resumo
- Um evento é uma ação que ocorre no navegador da Web, por exemplo, um clique do mouse.
- O fluxo de eventos tem dois modelos principais: bolha de eventos e captura de eventos.
- Evento DOM Nível 2 especifica que o fluxo de eventos tem três fases: bolha do evento, evento que ocorre no elemento exato e captura do evento.
- Use
addEventListener()
para registrar um evento que conecta um evento a um ouvinte de evento - O
event
objeto é acessível apenas no ouvinte de eventos. - Use
preventDefault()
o método para evitar o comportamento padrão de um evento, mas não interromper o fluxo do evento. - Use
stopPropagation()
o método para interromper o fluxo de um evento através da árvore DOM, mas não cancela o comportamento padrão do navegador.