7

¿Cuál es la diferencia entre event event bubbling y capturing?

¿Cuál de los dos es el mas indicado para usar?¿En que aspectos es mas eficiente cada uno de ellos?¿En que casos usariamos cada uno de ellos?

3 respuestas 3

6

Bubbling quiere decir un evento que se propaga desde el elemento que ejecuto el evento(event.target), hasta el elemento mas lejano en la jerarquia que disponga del mismo evento. Osea, desde la fuente del evento hasta el ancestro mas lejano:

form, div, p{
 border:solid red 1px;
 padding:2px;
}
<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

Fijate como primero se ejecuta el evento p, luego div y por ultimo form. Eso es bubbling.

Para detener el bubbling se utiliza el metodo event#stopPropagation():

function formFn()
{
  alert('form');
}

function divFn()
{
   alert('div');
}  

function pFn(e)
{
  alert('p');
  e.stopPropagation();
}
form, div, p{
  border:solid 1px red;
  padding:10px;
}
    <form onclick="formFn()">FORM
      <div onclick="divFn()">DIV
        <p onclick="pFn(event)">P</p>
      </div>
    </form>

En cuanto a capturing es lo contrario a bubbling: que en vez de ejecutar los eventos desde la fuente hasta el ancestro, seria desde el ancestro hasta la fuente.

Por ejemplo mira como aquí hay definidos 2 eventos, 1 para el form y otro para el p. Nota como al hacer clic sobre el elemento p primero se ejecuta el evento del form y luego es que va a p, mientras que si haces clic sobre form, solo se ejecuta su evento:

var usarCapture = true;
document.querySelector("#form")
.addEventListener("click", function(e){
   
  alert("clic sobre form");
  
}, usarCapture);

document.querySelector("p")
.addEventListener("click", function(e){
   alert("clic sobre p");
}, !usarCapture);
form, div, p{
 padding:10px;
 border:solid 1px red;
}
<form id="form">FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

Como ya habrás notado, bubbling es el evento por defecto. Si quieres utilizar capturing pues solo tendrías que pasarle true como ultimo parámetro al método addEventListener.

En cuanto a los casos de usos, siempre se recomienda utilizar bubbling por que es la forma mas fácil de descubrir la posición del elemento que lanzo el evento. Nunca me he visto la necesidad e utilizar capturing y seguro tendrás sus razones que por defecto es bubbling.

4

En JavaScript cuando se ejecuta un evento en un elemento del DOM, se tienen 3 fases diferentes las cuales se ejecutan en el siguiente orden:

  1. Capturing phase (captura), es la fase en la que desde el nodo padre, se va descendiendo hasta el nodo objetivo, no es muy utilizada esta propiedad pero puede ser muy útil en ciertos casos
  2. Target phase (objetivo), fase que se ejecuta al llegar al elemento objetivo
  3. Bubbling (propagación), ultima fase, en la que el evento se propaga de vuelta al nodo padre desde el elemento objetivo.

Veamos un ejemplo de bubbling, si tenemos una jerarquía de elementos los cuales capturan un mismo tipo de evento, estos se activarán desde el elemento objetivo hasta el padre:

body * {
    margin: 10px;
    border: 1px solid red;
    text-align: center;
  }
<form onclick="alert('Evento form')">Form
  <div onclick="alert('Evento Div')">Div
    <p onclick="alert('Evento objetivo')">Objetivo
    </p>
  </div>
</form>

Como puedes ver, si hacemos click sobre el elemento objetivo, se activa el alert de este primero, posteriormente del Div y al final en el Form, esto es bubbling, desde el objetivo hasta el padre.

Ahora vamos con capturing, el cual es en sentido inverso y lo podemos ver en funcionamiento utilizando la funcion addEventListener(evento, manejador[, capturing]) sobre un elemento, veamos un ejemplo:

document.getElementById('form').addEventListener("click", e => alert('Capturing en form'), true)
document.getElementById('form').addEventListener("click", e => alert('Bubbling en form'))
document.getElementById('div').addEventListener("click", e => alert('Capturing en div'), true)
document.getElementById('div').addEventListener("click", e => alert('Bubbling en div'))
document.getElementById('objetivo').addEventListener("click", e => alert('Capturing en el objetivo'), true)
document.getElementById('objetivo').addEventListener("click", e => alert('Bubbling en el objetivo'))
body * {
  margin: 10px;
  border: 1px solid red;
  text-align: center;
}
<form id='form'>Form
  <div id='div'>Div
    <p id='objetivo'>Objetivo</p>
  </div>
</form>

En este segundo ejemplo, añadimos un alert a los eventos de capturing poniendo como tercer parametro en addEventListener un true, y podemos ver el orden en el que se van ejecutando los eventos, primero los capturing, del padre al elemento objetivo y posteriormente de vuelta los bubble, del objetivo al padre.

Todo esto tiene muchas ventajas según lo que quieras lograr en tu código, capturing no es muy utilizado por su naturaleza de ser desde el nodo padre al nodo hijo, sin embargo bubbling es algo muy importante y que debemos de tener en cuenta al momento de usar eventos en JavaScript, ya que al propagarse hasta el elemento document puede llegar a causar algo que no deseamos.

Te dejo este excelente post por parte de Javascript.info, está en ingles pero explica de una manera más detallada la propagación de eventos, como detenerla y las propiedades que debemos conocer de cada evento.

0

Diferencia entre capture y bubbling

bubbling recorre el arbol dom de lo profundo hacia afuera

capture es lo contrario a bubbling

Ejemplo para bubbling

window.onload = function() {

  var c = document.getElementById("c");
  var a = document.getElementById("a");
  var b = document.getElementById("b");

  c.addEventListener("click", f1, true);
  b.addEventListener("click", f2, true);
  a.addEventListener("click", f3, true);


}

function f1() {

  console.log("has pulsado en el boton C");
}

function f2() {

  console.log("has pulsado en la B")
}

function f3() {

  console.log("has pulsado en la A")
}
<div id="a">
  <div id="b">
    <p><input type="button" id="c" value="a"></p>
  </div>
</div>

ejemplo para capture

window.onload = function() {


  var c = document.getElementById("c");
  var a = document.getElementById("a");
  var b = document.getElementById("b");


  c.addEventListener("click", f1);
  b.addEventListener("click", f2);
  a.addEventListener("click", f3);

}

function f1() {

  console.log("has pulsado en el boton C");
}

function f2() {

  console.log("has pulsado en la B")
}

function f3() {

  console.log("has pulsado en la A")
}
<div id="a">
  <div id="b">
    <p><input type="button" id="c" value="a"></p>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.