Descreva a propagação de eventos

A propagação de eventos é um mecanismo na DOM (Modelo de Objetos do Documento) em que um evento, como um clique ou um evento de teclado, é primeiro acionado no elemento de destino que iniciou o evento e, em seguida, se propaga para cima (bolhas) pela árvore da DOM até a raiz do documento.

Fase de bolha

Durante a fase de bolha, o evento começa no elemento de destino e se propaga pelos seus ancestrais na hierarquia da DOM. Isso significa que os manipuladores de eventos associados ao elemento de destino e aos seus ancestrais podem potencialmente receber e responder ao evento.

Aqui está um exemplo usando a sintaxe moderna do ES6 para demonstrar a propagação de eventos:

// HTML:
// <div id="pai">
//   <button id="filho">Clique em mim!</button>
// </div>

const pai = document.getElementById('pai');
const filho = document.getElementById('filho');

pai.addEventListener('click', () => {
  console.log('Cliquei no elemento pai');
});

filho.addEventListener('click', () => {
  console.log('Cliquei no elemento filho');
});

Quando você clica no botão "Clique em mim!", devido à propagação de eventos, os manipuladores de eventos do filho e do pai serão acionados.

Parando a propagação

A propagação de eventos pode ser interrompida durante a fase de bolha usando o método stopPropagation(). Se um manipulador de eventos chamar stopPropagation(), ele impedirá que o evento continue a se propagar pela árvore da DOM, garantindo que apenas os manipuladores dos elementos até aquele ponto na hierarquia sejam executados.

Delegação de eventos

A propagação de eventos é a base para uma técnica chamada "delegação de eventos", onde você anexa um único manipulador de eventos a um ancestral comum de vários elementos e usa a delegação de eventos para lidar eficientemente com os eventos desses elementos. Isso é particularmente útil quando você tem um grande número de elementos semelhantes, como uma lista de itens, e deseja evitar a adição de manipuladores de eventos individuais a cada item.

Referências

• MDN Web Docs sobre Propagação de Eventos
• JavaScript.info - Bolhas e Captura
• Especificação de Eventos do W3C DOM Nível 3

Exercícios

const outer = document.querySelector('#outer');
const button = document.querySelector('button');

outer.addEventListener('click', () => console.log('outer'));
button.addEventListener('click', () => console.log('button'));
document.body.addEventListener('click', () => console.log('body'));