Eventos JavaScript – Acervo Lima Tutorials

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 clickevento 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 btnusando o querySelector()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, a display()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 dive 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 documentou par window).

Ao clicar no botão, o clickevento ocorre na seguinte ordem:

botão
div com o contêiner de id
corpo
HTML
documento

O clickevento ocorre primeiro no botão que é o elemento que foi clicado. Em seguida, o clickevento sobe na árvore DOM, disparando em cada nó ao longo do caminho até atingir o documentobjeto.

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 windowobjeto.

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 clickevento 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 Eventobjeto 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 eventobjeto:

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 eventobjeto 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 hrefatributo:

<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 eventobjeto:

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 cancelablepropriedade 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 clickevento nunca chega a bodyporque the stopPropagation()foi chamado no clickmanipulador 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 eventobjeto é 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.