46 lines
2.4 KiB
Plaintext
46 lines
2.4 KiB
Plaintext
---
|
|
title: 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:
|
|
|
|
```js
|
|
// 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](https://developer.mozilla.org/pt-BR/docs/Web/API/Event/stopPropagation)
|
|
- [JavaScript.info - Bolhas e Captura](https://javascript.info/bubbling-and-capturing)
|
|
- [Especificação de Eventos do W3C DOM Nível 3](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
|