Bubbling e captura de eventos: entendendo a propagação no DOM

Bubbling e captura de eventos desempenham papéis cruciais na propagação de eventos dentro da API HTML DOM. Para compreender sua funcionalidade, vamos nos aprofundar nos meandros desses dois conceitos.

Event Bubbling vs. Event Capturing

Quando um evento ocorre em um elemento aninhado dentro de outro elemento , e ambos os elementos registraram manipuladores de eventos para esse evento específico, o modo de propagação do evento determina a ordem em que os elementos recebem o event.

• Event Bubbling: O evento é inicialmente capturado e manipulado pelo elemento mais interno e depois propagado para seus elementos pais.
• Evento Capturando: O evento é primeiro capturado pelo elemento mais externo e propagado para dentro até seu elemento aninhado Elementos. up."

Suporte ao navegador

A Netscape introduziu a captura de eventos, enquanto a Microsoft defendeu o evento bubbling.

O padrão W3C Document Object Model Events (2000) incorporou ambos.IE

• Considerações sobre desempenho
• O borbulhamento de eventos pode ter desempenho um pouco inferior em DOMs complexos em comparação com eventos capturando.

Uso

Utilizamos o método addEventListener(type, listener, useCapture) para registrar manipuladores de eventos no modo de bolha (padrão) ou de captura. Para usar o modelo de captura, o terceiro argumento deve ser definido como verdadeiro.

Exemplo

Considere a seguinte estrutura HTML:

Se um evento de clique ocorrer no elemento li:

No modo de captura, o evento é primeiro tratado pelo div, seguido pelo ul e, finalmente, pelo li.

Recursos adicionais
• [Ordem de eventos no QuirksMode](https://www.quirksmode.org/js/events_order.html )

[addEventListener ativado MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)[Eventos avançados no QuirksMode](https://www.quirksmode.org/ js/events/)

• Demonstração interativa
• O seguinte exemplo interativo ilustra as fases de captura e borbulhamento da propagação do evento:

var logElement = document.getElementById('log'); registro de função (mensagem) { logElement.innerHTML = ('

' mensagem '

'); } função capturar() { log('captura: 'this.firstChild.nodeValue.trim()); } função bolha() { log('bolha: 'this.firstChild.nodeValue.trim()); } var divs = document.getElementsByTagName('div'); for (var i = 0; i Ao clicar em qualquer um dos elementos destacados, observe a fase de captura do evento ocorrendo primeiro, seguida pela fase de borbulhamento.