Captura y difusión de eventos: comprensión de la propagación en el DOM

La difusión y captura de eventos desempeñan funciones cruciales en la propagación de eventos dentro de la API HTML DOM. Para comprender su funcionalidad, profundicemos en las complejidades de estos dos conceptos.

Burbujeo de eventos versus captura de eventos

Cuando ocurre un evento en un elemento anidado dentro de otro elemento y ambos elementos tienen controladores de eventos registrados para ese evento en particular, el modo de propagación de eventos determina el orden en el que los elementos reciben el evento.

• Evento burbujeante: El evento es inicialmente capturado y manejado por el elemento más interno y luego propagado hacia afuera a sus elementos principales.
• Evento Capturando: El evento es capturado primero por el elemento más externo y propagado hacia adentro a su elemento anidado. elementos.

Goteo versus burbujeo

La captura también se conoce como "goteo", un término que ayuda a recordar el orden de propagación: "goteo, burbuja up."

Soporte del navegador

• Netscape introdujo la captura de eventos, mientras que Microsoft defendió la captura de eventos. burbujeo.
• El estándar W3C Document Object Model Events (2000) incorporó ambos.
• IE

Consideraciones de rendimiento

La propagación de eventos puede tener un rendimiento ligeramente inferior en DOM complejos en comparación con el evento capturando.

Uso

Utilizamos el método addEventListener(type, listening, useCapture) para registrar controladores de eventos en modo burbujeo (predeterminado) o captura. Para utilizar el modelo de captura, el tercer argumento debe establecerse en verdadero.

Ejemplo

Considere la siguiente estructura HTML:

Si se produce un evento de clic en el elemento li:

• En el modo de captura, el evento es manejado primero por el div, seguido por el ul y finalmente el li.
• En el modo burbujeante, el evento es manejado primero por li, luego por ul y por último por div.

Recursos adicionales

• [Orden de eventos en QuirksMode](https://www.quirksmode.org/js/events_order.html )
• [addEventListener en MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
• [Eventos avanzados en QuirksMode](https://www.quirksmode.org/ js/events/)

Demostración interactiva

El siguiente interactivo El ejemplo ilustra las fases de captura y difusión de la propagación de eventos:

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML  = ('
'   msg   '
');
}

function capture() {
    log('capture: '   this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: '   this.firstChild.nodeValue.trim());
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i 
Al hacer clic en cualquiera de los elementos resaltados, observe que la fase de captura del evento ocurre primero, seguida de la fase de burbujeo.