Pasar al contenido principal

Bubbling en JavaScript

Imagine por un momento que se sumerge en una piscina de dos metros de profundidad y se posa en el fondo por unos instantes. Usted deja salir de la boca  unas pequeñas corrientes de aire provocando burbujas desde su ubicación más profunda hasta la superficie de la pileta. Después de un tiempo requiere tomar aire y hace el recorrido similar al de las pompas de aire por gracias del ocio. Al igual que una burbuja, cuando se ejecutan eventos en JavaScript , dichos llamados se hacen en forma de pompa, desde el elemento más interno hasta el más externo.  Ese comportamiento se denomina bubbling (burbujeante).

A continuación vamos a crear una estructura html para comprender mejor el concepto enunciado. La imagen muestra una serie de rectángulos anidados a los cuales les programamos eventos de click. Observe la imagen

imagen-bubbling.png

Código CSS:

body,html{
    height: 100%;
    margin: 0;
}

.container,.element-1,.element-2{
    align-items: center;
    display: flex;
    justify-content: center;
}

.container{
   background-color: #004d40 ;
   height: 100%;
   position: relative;
   width: 100%;
 }

 .element-1{
   background-color: #00897b ;
   width: 600px;
   height: 600px;
 }

 .element-2{
    background-color: #26a69a;
    width: 350px;
    height: 350px;
 }

 .element-3{
     background-color: #80cbc4 ;
     width: 175px;
     height: 175px;
 }

Ahora insertemos el código html:

<div class="container">
      <div id="element-1" class="element-1">
          <div id="element-2" class="element-2">
              <div id="element-3" class="element-3">

              </div>
          </div>
      </div>
</div>

Ahora vinculamos código javascript e invocamos el evento click para los elemento menos interno que es el divisor con id igual a element-1. Este es el código:

<script>
(function(){
     //Evento click para el objeto objeto menos interno, es decir, el div con id = element-1
     let element1 = document.querySelector('#element-1');
     element1.addEventListener('click',function(e){
        alert(e.target.id);
     });
})();
</script>

Esto es lo que veríamos:

Captura de pantalla de 2017-06-28 11-17-08.png

Hay algunos temas a considerar. El evento está definido para el elemento más externo(element-1), pero si usted da click en el divisor(div) con id “element-2” verá que el alert muestra el valor del objeto evento(e) con su propiedad “target” el id(element-2) y lo mismo si da clic en el objeto más interno, el divisor con id “element-3”.

Según la observación anterior si da clic en el elemento más interno, estará dando clic en el elemento padre. En otras palabras; si da clic en el elemento con id = “element-3” que es el más interno estará desatando el evento en los elemento menos internos(element-2 y element-3) y se detalla en concepto de bubbling.

La propiedad target del objeto evento(e.target) muestra el objeto que desencadena el evento.

Ahora en el código JavaScript creamos tres controladores de eventos para element-1, element-2 y element-3. Las impresiones se harán por consola y no por alert:

<script>
        (function(){

            //Evento click para el objeto objeto menos interno, es decir, el div con id = element-1
            let element1 = document.querySelector('#element-1');
            element1.addEventListener('click',function(e){
                console.log(e.target.id);
            });

            //Evento click para el objeto objeto medio, es decir, el div con id = element-2
            let element2 = document.querySelector('#element-2');
            element2.addEventListener('click',function(e){
                console.log(e.target.id);
            });

            //Evento click para el objeto objeto medio, es decir, el div con id = element-2
            let element3 = document.querySelector('#element-3');
            element3.addEventListener('click',function(e){
                console.log(e.target.id);
            });
        })();
    </script>

Al dar click en el divisor con id = element-3 notará que el evento se desencadena tres veces por el hecho de que a su vez da clic en los divisores con id element-2 y element-1 que son más externos. La función alert mostrar tres veces “element-3” ya que la propiedad target hacer referencia al objeto que desencadena las acciones.

 

Si da click en el el divisor con id = element-2 observará que las acciones o eventos se desencadenan dos veces porque está dando click en los divisor id = element-2 y element-1 este último el más externo y ancestro de los otros elementos.

 

Cambiemos en los controladores la impresión en consola de la propiedad target.id por la impresión del objeto que ejecuta la acción(this) y notemos algunas diferencias. El código quedaría así:

<script>
        (function(){
            //Evento click para el objeto objeto menos interno, es decir, el div con id = element-1
            let element1 = document.querySelector('#element-1');
            element1.addEventListener('click',function(e){
                console.log(this);
            });

            //Evento click para el objeto objeto medio, es decir, el div con id = element-2
            let element2 = document.querySelector('#element-2');
            element2.addEventListener('click',function(e){
                console.log(this);
            });

            //Evento click para el objeto objeto medio, es decir, el div con id = element-2
            let element3 = document.querySelector('#element-3');
            element3.addEventListener('click',function(e){
                console.log(this);
            });
        })();
</script>

Al dar click en el divisor con id  element-3 la consola mostrará los tres objetos que desencadenan el evento click : element-3, element-2 y element-1. Recuerde que el elemento con id = element-3 es el más interno y según el concepto de Blubbling burbujeo por defecto se hace desde la el elemento más interno. Si da click en el objeto con id = element-2 la consola mostrará los objetos con id = element-2 y element-1 y al dar click en el objeto con id = element-1 la consola mostrará el divisor con id = element-1. Así lo muestran las siguientes imágenes:

Click en element-3:

this-click.png

Click en element-2:

this-click2.png

Click en element-1:

this-click3.png

En resumen el Bubbling hace referencia al desencadenamiento de eventos en elementos anidados desde el más interno hasta el más externo al igual que una burbuja.

 

En próximos artículos estaremos desglosando los temas de capturing y delegación de eventos

 


 

Enviado por John el Jue, 29/06/2017 - 16:19