Este grupo especializado luego de días de investigación y recopilar de datos, hallamos la respuesta, queremos que te resulte útil en tu trabajo.
Solución:
El burbujeo y la captura de eventos son dos formas de propagación de eventos en la API HTML DOM, cuando ocurre un evento en un elemento dentro de otro elemento, y ambos elementos han registrado un identificador para ese evento. El modo de propagación del evento determina en qué orden los elementos reciben el evento.
Con el burbujeo, el evento primero es capturado y manejado por el elemento más interno y luego se propaga a los elementos externos.
Con la captura, el evento primero es capturado por el elemento más externo y se propaga a los elementos internos.
La captura también se denomina “goteo”, lo que ayuda a recordar el orden de propagación:
chorrear, burbujear
En los viejos tiempos, Netscape defendía la captura de eventos, mientras que Microsoft promovía la difusión de eventos. Ambos forman parte del estándar de eventos del modelo de objetos de documento del W3C (2000).
IE < 9 usa solo burbujeo de eventos, mientras que IE9+ y todos los principales navegadores son compatibles con ambos. Por otro lado, el rendimiento del burbujeo de eventos puede ser ligeramente inferior para los DOM complejos.
Podemos usar el addEventListener(type, listener, useCapture) para registrar controladores de eventos en modo burbujeante (predeterminado) o de captura. Para usar el modelo de captura, pase el tercer argumento como true.
Ejemplo
En la estructura anterior, suponga que se produjo un evento de clic en el li elemento.
En la captura de modelo, el evento será manejado por el div primero (haga clic en controladores de eventos en el div disparará primero), luego en el ulluego en el último elemento de destino, li.
En el modelo burbujeante, sucederá lo contrario: el evento será manejado primero por el lientonces por el uly finalmente por el div elemento.
Para más información, ver
- Orden de eventos en QuirksMode
- agregarEventListener en MDN
- Eventos avanzados en QuirksMode
En el siguiente ejemplo, si hace clic en cualquiera de los elementos resaltados, puede ver que la fase de captura del flujo de propagación del evento se produce primero, seguida de la fase de propagación.
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());
function clearOutput()
logElement.innerHTML = "";
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++)
divs[i].addEventListener('click', capture, true);
divs[i].addEventListener('click', bubble, false);
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);p
line-height: 0;
div
display:inline-block;
padding: 5px;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
div:hover
border: 1px solid #faa;
background: #fdd;
1
2
3
4
5
Otro ejemplo en JSFiddle.
Descripción:
quirksmode.org tiene una buena descripción de esto. En pocas palabras (copiado de quirksmode):
Captura de eventos
Cuando utiliza la captura de eventos
| | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 / | | | ------------------------- | | Event CAPTURING | -----------------------------------el controlador de eventos del elemento 1 se activa primero, el controlador de eventos del elemento 2 se activa en último lugar.
Evento burbujeante
Cuando usas el burbujeo de eventos
/ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | -----------------------------------el controlador de eventos del elemento 2 se activa primero, el controlador de eventos del elemento 1 se activa en último lugar.
¿Qué usar?
Depende de lo que quieras hacer. No hay mejor. La diferencia es el orden de ejecución de los controladores de eventos. La mayoría de las veces estará bien disparar controladores de eventos en el burbujeante pero también puede ser necesario dispararlos antes.
Si hay dos elementos, el elemento 1 y el elemento 2. El elemento 2 está dentro del elemento 1 y adjuntamos un controlador de eventos con ambos elementos, digamos onClick. Ahora, cuando hacemos clic en el elemento 2, se ejecutará eventHandler para ambos elementos. Ahora aquí la pregunta es en qué orden se ejecutará el evento. Si el evento adjunto con el elemento 1 se ejecuta primero, se denomina captura de eventos y si el evento adjunto con el elemento 2 se ejecuta primero, se denomina burbujeo de eventos. Según W3C, el evento comenzará en la fase de captura hasta que alcance el objetivo, vuelva al elemento y luego comience a burbujear.
Los estados de captura y burbujeo son conocidos por el parámetro useCapture del método addEventListener
eventTarget.addEventListener(tipo,oyente,[,useCapture]);
Por defecto useCapture es false. Significa que está en la fase de burbujeo.
var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
div1.addEventListener("click", function (event)
alert("you clicked on div 1");
, true);
div2.addEventListener("click", function (event)
alert("you clicked on div 2");
, false);#div1
background-color:red;
padding: 24px;
#div2
background-color:green;
div 1
div 2
Por favor, intente cambiar true y false.
Tienes la opción de añadir valor a nuestro contenido contribuyendo tu experiencia en las aclaraciones.