7.1 Event Bubbling (Propagação de Eventos)
No JavaScript, eventos que acontecem em um elemento podem se espalhar através da árvore DOM. Esse processo é chamado propagação de eventos e inclui dois mecanismos principais: propagação de eventos (event bubbling) e captura de eventos (event capturing).
Mecanismos de propagação de eventos:
- Event Bubbling (Propagação de eventos).
- Event Capturing (Captura de eventos).
Propagação de eventos é o processo pelo qual um evento ocorrido no elemento filho se propaga
de forma sequencial para cima na cadeia dos elementos pai até o elemento raiz (normalmente document).
Explicação:
- Quando o botão
childé clicado, primeiro o handler do evento no elementochildé acionado (Child clicked) - Então, o evento sobe para o elemento
parent, e o handler dele é acionado (Parent clicked)
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing (Captura de Eventos)
Captura de eventos é o processo em que um evento se propaga primeiro do elemento raiz para baixo na cadeia dos elementos pai até o elemento alvo, onde o evento ocorreu.
Para usar a captura de eventos, é necessário definir o parâmetro capture como true ao adicionar o handler do evento.
Explicação:
-
Quando o botão
childé clicado, primeiro o handler do evento no elemento parent (Parent clicked) é acionado devido à configuração do parâmetrocapturecomotrue -
Depois, o evento atinge o elemento alvo
child, e o handler dele é acionado (Child clicked)
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 Modelo de Propagação de Eventos com Três Fases
No processo de tratamento de eventos no DOM, existem três fases:
1. Capturing Phase (Fase de Captura). O evento se propaga do elemento raiz (normalmente document) para baixo na cadeia dos elementos pai até o elemento alvo.
2. Target Phase (Fase do Alvo). O evento atinge o elemento alvo, onde o evento ocorreu.
3. Bubbling Phase (Fase de Propagação). O evento se propaga do elemento alvo para cima na cadeia dos elementos pai até o elemento raiz.
Controle da Propagação de Eventos
Existem métodos para controlar a propagação de eventos:
stopPropagation(). Para a propagação adicional do evento tanto durante a fase de propagação quanto de captura.stopImmediatePropagation(). Para a propagação adicional do evento e previne a execução de outros handlers de eventos no elemento atual.preventDefault(). Cancela a ação padrão associada ao evento (por exemplo, envio de formulário ao clicar no botão).
7.4 Exemplo de Uso do stopPropagation
Explicação:
- Quando o botão
childé clicado, o handler do evento no elementochildé acionado (Child clicked) - A propagação do evento é parada com
event.stopPropagation(), e o handler do evento no elemento parent não é acionado
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // Para a propagação do evento
});
</script>
</body>
</html>
GO TO FULL VERSION