Event delegation

Clase 19 de 29 • Curso de Manipulación del DOM

Carlos Eduardo Gomez García

teacher•

La delegación de eventos es básicamente un contenedor padre que le pasa el evento a todos sus hijos (en realidad no se los está pasando, sino que el contenedor padre sigue estando presente en todos los hijos, es por eso que cuando clicamos a un hijo el evento es disárado). . Entendiendo esto, cuando obtenemos el target podemos saber cuál elemento hijo del padre fue clicado, por tanto, con una simple condicional puede ver si el elemento clicado es el que yo quiero. . Ojo: Eso no significa que el evento se quite de los demás elementos hijos, si tu clicas cualquier otro elemento hijo el evento se va a disparar sí o sí, pero lo que sucede es que la condición del tarjet no se cumple, por eso no hace nada. . Y sabiendo esto, puedes hacer cosas chulas como crear funciones que escuchen eventos dinámicamente, una característica de los eventos es que solo se le aplican a los elementos que están desde el inicio, pero si tu agregas otro nodo desde JavaScript los eventos no se van a escuchar para ese nuevo nodo. Entonces, una técnica que se suele usar es escuchar al padre (o en ocasiones a todo el document) y cada vez que el evento ocurra buscar a todos sus hijos que coincidan con el selector al que queremos aplicarle el evento, de esta forma no importa si los nodos se añaden posteriormente desde JavaScript, el evento será escuchado pues JavaScript directamente irá a buscar todos los nodos hijos que cumplan con dicho selector, por ejemplo: HTML

<div id="divPadre">
    <div class="div">
        Hola
    </div>
</div>

JavaScript

document.querySelector(".div").addEventListener("click", () => {
    // Hace algo
})

En este caso, si al div padre yo le añadiera desde JavaScript otro elemento con la clase div, el evento NO funcionaría:

const nuevoDiv = document.createElement("div");
nuevoDiv.className = "div";
nuevoDiv.textContent = "Nuevo div"
divPadre.append(nuevoDiv)

Sin emabrgo, al usar la delegación de eventos, puedo escuchar al padre y buscar al hijo que me interesa:

nuevoDiv.addEventListener("click", event => {

    if(event.target.classList.contains("div")) {
        // Código
    }

})

De esta forma, no importa cuantos elementos nuevos agregues al padre desde JavaScript, esto siempre va a funcionar. . Ahora, si quieres hacer algo más pro, puedes crear una función en el cual tu le pases un selector en específico para usar dentro del div, así solo tienes que llamar a esa función y pasarle el selector de tal manera que se quede escuchando por cualquier elemento nuevo que sea agregado, algo así:

eventAll("click", parentElement, elementToListen, () => {
    // Has algo
})

Una función de ese tipo sería muy útil, porque así puedo mantener escuchando cada elemento, no importa que se agregue después con JavaScript, y sí, yo ya la cree, de hecho hice una mini librería para escuchar eventos partiendo de esta base, pueden indagar el código aquí: . events.js . Claro, este código está desactualizado porque tiene un pequeño bug y hay ciertos elementos con los que no funciona, pero para eso podemos usar un MutationObserver que mire cuando el padre haya sido modificado (se le haya agregado un hijo nuevo) y a ese hijo aplicarle el evento, yo ya lo hice pero se los dejo de tarea si tienen cursiodidad sobre eso 👀

Jonathan 🦑 Alvarez

teacher•

wow fan de estos resumenes!

Jimmy Buriticá Londoño

student•

Super 👍

Fernando Quinteros Gutierrez

student•

📩 Event delegation

Apuntes

La idea principal es delegar un evento global a un solo nodo y desde esa parte poder delegar todos los eventos que sucedan
Se debe usar cuando el número de escuchadores es alto
Se trata de identificar de donde proviene el evento, según a ello se lo captura con un condicional y se procede a realizar las operaciones

RESUMEN: La técnica event delegation consiste en dejar todos los eventos sucedan en un elemento superior de tal forma que este los identifique y aplique el procedimiento con condicionales

Giselle Desiree Boyer Jimenez

student•

Event delegation consiste en delegar a un solo padre (el padre) el manejo/escucha de los eventos que nos interesan, de esta manera tendremos un único eventListener en lugar de tener uno por cada elemento lo cual puede impactar en el rendimiento de nuestro sitio web cuando son muchos eventListeners. Si deseamos manejar la interacción solo sobre un elemento específico dentro del nodo padre, solo se debe especificar dentro de la función, para esto se puede usar la información provista por el elemento event.

Andrés Felipe Lopez gomez

student•

Muchas gracias

Luis Alejandro Vera Hernandez

student•

Gracias, pregunta de examen jaja

Stanley Melgar

student•

Como dato la diferencia entre target y currentTarget radica en que el primero hacer referencia al disparador del evento, donde debemos de interactuar para que este se ejecute. Por otro lado el currentTarget es el nodo padre en el que esta el disparador.

Andres Felipe Pinchao Ramirez

student•

MIS APUNTES EVENT DELEGATION 😎👌


/*Utilizaremos nuestro proyecto anterior para que cuando le de click a cada
  uno de los elemento me salga un alert distinto  */

  
const baseUrl = "https://platzi-avo.vercel.app";
const appNode = document.querySelector('#app');

/* 2 forma le agregaremos el escuchador de eventos al contenedor 
   de  nuestros elementos, a este patron se le conoce como delegacion
   de eventos estamos delegando a un solo nodo que es el padre
   de todos lo queremos escuchar que se encargue de manejar todos 
   los eventos de esa zona.
   
   Es importante este patron cuando manejamos
   una gran cantidad de escuchadores y es manejada por la mayoria
   de frameworks importantates
   
   Esto hara que cuando demos click en cualquier parte del elemento
   se ejecute la alerta esto lo podemos arreglar

   Utilizando un condicional en la que utilizamos el parametro
   de la funcion que devuele el evento y entonces accedemos a la
   propiedad target a nodeName y le decimos que solo cuando el evento
   se hubique en el h2 dispare la alerta
   
   */

   appNode.addEventListener('click', (event) => {
    if(event.target.nodeName === 'H2'){

        window.alert("Hola");

    }
  


   });


 const formatPrice = price => {

    const newPrice = new window.Intl.NumberFormat("es-EN", {
        style: "currency",
        currency: "USD"
    }).format(price) 

    return newPrice;
 }

window
    .fetch(`${baseUrl}/api/avo`)
    .then(respuesta => respuesta.json())
    .then(responseJson =>{

        const todosLosItems = [];
        responseJson.data.forEach(item => {
        
        const imagen = document.createElement('img');
      
        imagen.src = `${baseUrl}${item.image}`;

        imagen.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
        
    
        const titulo = document.createElement('h2');

        titulo.className = "text-lg";
        
        titulo.textContent = item.name;

        /* 1 forma de hacer que al dar click se ejecute una alerta 
        
            Esto funciona pero hay que tener en cuenta que estamos
            agregando un eventListener por cada elemento que recibimos por
            parte de la API
        
        
        */

        titulo.addEventListener('click', () => {

            window.alert("Hola");
        })


    
        const precio = document.createElement('div');

        precio.className = "text-gray-600";

        precio.textContent = formatPrice(item.price);


         priceAndTitle.className = "text-center md:text-left";
         priceAndTitle.appendChild(titulo);
         priceAndTitle.appendChild(precio);

        const card = document.createElement("div");
        card.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300";
        card.append(imagen, priceAndTitle);

        

        const container = document.createElement('div');
        container.appendChild(card);


     
     
            todosLosItems.push(container);
            
        
                
            });
    
            appNode.append(...todosLosItems)
    
        });

Anfernee Valera

student•

Yo estuve curioseando y encontré que además de bubling también existe Capturing.

Capturing.

Esta forma de propagación funciona al revés que bubling, va desde el elemento mas afuera, hasta el evento seleccionado, activando así todos los padres que contuviesen el mismo evento.

OJO

No confundir Capturing con está técnica enseñada en clases llamada Event delegation la segunda sigue utilizando la forma de propagación Bubling Solo que le adjunta el Escuchador de eventos al padre, para así reaccionar a todos los clicks dentro de este.

Jose David Villalobos Rodriguez

student•

Importante destacar que los elementos dentro target.nodeName son todos en mayusculas. Si quisieras identificar un div sería "DIV" un input sería un "INPUT"

Joel Eduardo Sánchez Herrera

student•

El curso esta muy padre! pero neta todo en blanco? XDD mis ojos lloran

Alvaro Ibáñez Vázquez

student•

La complejidad del ser humano crece a medida que se le brindan mas herramientas para su entorno

Usuario anónimo

user•

Les comparto este artículo

Alejandro Dotor

student•

AYUDAAAAA!! Si yo quiero que el evento no sea para el H2 sino para el DIV que contiene toda la info(img, h...) Como seria el Event delegation

No se si me explico, yo quiero que cuando se haga click en cualquier parte de este contenedor (no importa si es la imagen, el titulo, o el Background ETC) sala en consola que se hizo click (claro con event delegation, no vale seleccionar el contenedor con un querySelector )

Jonathan 🦑 Alvarez

teacher•

Hey hey!

Se hace de forma similar a como muestro con el H2, solo que tenemos que:

Validar que el nodo sea tipo DIV

if (event.target.nodeName === 'DIV') {
  // ...
}

"Atrapar" únicamente el DIV que nos interesa.

DIVs hay muchos, así que debemos identificar el que queremos. Para esto sugiero agregar una clase única al momento de crear este nodo, por ejemplo: "js-card-contenedor". Y así, el condicional quedaría como:

if (event.target.nodeName === 'DIV' && event.target.classList.includes('js-card-contenedor')) {
  // ...
}

Alejandro Dotor

student•

Graciaaaaas 💚💚

Andrés Castellanos

student•

¿Por qué usar event delegation? Porque cuando agregas un nodo de manera dinámica con JS este no va a poder vincularse con un eventListener. Para ello se usa un padre que se haya cargado desde un inicio. Este articulo de medium lo explican detalladamente: https://medium.com/@bretdoucette/part-4-what-is-event-delegation-in-javascript-f5c8c0de2983 . Otra razón es porque afecta el rendimiento, aquí se habla de ello: https://stackoverflow.com/questions/28627606/does-adding-too-many-event-listeners-affect-performance

CHRISTIAN OLIVER SOLANO NUÑEZ

student•

evento con estilos tailwindcss

const containerCards = document.querySelector('#container');

containerCards.addEventListener('click', (event) => {
    if(event.target.nodeName === 'H2'){
        window.alert('Activaste un evento con el texto');
    }
    if(event.target.nodeName === 'IMG'){
        window.alert('Activaste un evento con la imagen');
    }
});


 const image = document.createElement('img');
        image.src = `${URLmain}${element.image}`;
        image.alt = element.name;
        image.className = 'w-11/12 rounded-full  hover:opacity-75 cursor-pointer';

        const title = document.createElement('h2');
        title.textContent = element.name;
        title.className = 'ml-2 font-medium hover:text-green-500 cursor-pointer';

Cristian Contreras

student•

Hola, comunidad. Alguien puede explicarme qué hace el método window.?

Rodrigo Andre Gutierrez

student•

esto lo saqué de desarrolloweb.com

Window Hace referencia a la ventana actual. Es el objeto principal en la jerarquía y contiene las propiedades y métodos para controlar la ventana del navegador. De él dependen todos los demás objetos de la jerarquía. Vamos a ver la lista de sus propiedades y métodos.

Jonathan Forero

student•

La variable "Window" en el contexto de los navegadores web se refiere a un objeto global que representa la ventana del navegador en la que se muestra un documento web. Es parte del modelo de objetos del navegador, que proporciona una interfaz para interactuar con los elementos de la página y realizar diversas acciones.

El objeto "Window" contiene propiedades y métodos que permiten acceder y manipular la ventana del navegador, así como interactuar con los elementos de la página web cargada en dicha ventana. Algunas de las propiedades y métodos más comunes asociados con la variable "Window" incluyen:

Document: Proporciona acceso al objeto "Document" que representa el contenido de la página web cargada en la ventana del navegador. Permite realizar manipulaciones en la estructura del documento, acceder y modificar elementos HTML, cambiar estilos, agregar eventos y más.
Location: Proporciona información sobre la URL actual de la página web cargada en la ventana del navegador y permite redireccionar a otras páginas.
Navigator: Proporciona información sobre el navegador del usuario, como el nombre, la versión y el agente de usuario. También se utiliza para detectar características y capacidades específicas del navegador.
History: Proporciona acceso y control del historial de navegación del usuario. Permite realizar acciones como retroceder o avanzar en el historial de páginas visitadas.
Alert, Confirm, Prompt: Métodos que se utilizan para mostrar cuadros de diálogo al usuario con mensajes, solicitudes de confirmación o solicitudes de entrada de texto.

Estas son solo algunas de las propiedades y métodos disponibles en el objeto "Window". La variable "Window" es esencial en la programación web, ya que permite interactuar con la ventana del navegador y crear aplicaciones web dinámicas y interactivas.

Luciano Madroñal correa

student•

Hola, hay algún método para saber si un elemento tiene un evento asignado?

Alejandro Forero Vanegas

student•

La forma que yo reviso si un elemento tiene un evento asignado lo hago a través del dev tools.

Jonathan Forero

student•

En JavaScript, no hay un método integrado para verificar si un elemento tiene un evento asignado directamente. Sin embargo, puedes utilizar algunas técnicas para determinar si se ha asignado un evento a un elemento. A continuación, te mostraré dos enfoques comunes:

Comprobación de la existencia de un manejador de eventos directamente en la propiedad del elemento:

Puedes verificar si un elemento tiene un evento asignado revisando la propiedad del elemento que corresponde al evento específico. Por ejemplo, si deseas verificar si se ha asignado el evento "click" a un elemento con el id "myElement", puedes hacer lo siguiente:

var element = document.getElementById('myElement');

if (typeof element.onclick === 'function') {
  console.log('El elemento tiene un evento click asignado.');
} else {
  console.log('El elemento no tiene un evento click asignado.');
}

Este enfoque comprueba directamente la existencia de un manejador de eventos en la propiedad específica del elemento. Sin embargo, este método solo funciona si el evento se ha asignado directamente a la propiedad del elemento y no a través de otros métodos como addEventListener().

Uso de getEventListeners() (solo en navegadores con compatibilidad):

Algunos navegadores modernos proporcionan una función llamada getEventListeners() que puede utilizarse para obtener una lista de eventos asignados a un elemento. Sin embargo, esta función no es parte de la especificación oficial de JavaScript y puede no estar disponible en todos los navegadores.

var element = document.getElementById('myElement');
var eventListeners = getEventListeners(element);

if (eventListeners.click && eventListeners.click.length > 0) {
  console.log('El elemento tiene un evento click asignado.');
} else {
  console.log('El elemento no tiene un evento click asignado.');
}

Este método utiliza la función getEventListeners() para obtener una lista de eventos y sus manejadores asociados para el elemento especificado. Luego, se verifica si hay algún manejador de eventos para el evento específico que estás buscando.

Es importante destacar que este segundo enfoque puede no funcionar en todos los navegadores, ya que no es parte de la especificación oficial. Por lo tanto, se recomienda utilizar el primer enfoque si deseas una solución más ampliamente compatible.

Sebastian Rodriguez

student•

QUE BUENA clase, estaba construyendo una e-commerce y queria que los productos se habrieran solo al dar click en la imagen. No olviden que para usar .nodeName es en mayuzcula: "IMG", "DIV" etc, perdí media hora con eso XD

Usuario anónimo

user•

(○｀ u′○) ato curioso, las comparaciones del nodeName se hacen siempre en mayusculas. .

Event delegation

Al patron de la combinación de eventos y su forma del propagarse en el DOM se le llama “Event Delegation” o delegación de eventos.

Ejemplo:

// señalando a todos los P de un div.container
document.querySelector("div.container").addEventListener("click", (event) => {
    console.log(event.target.nodeName)
    if (event.target.nodeName === "P") {
        window.alert("Hola")
    }
})

Nota: Los “nodeName” se refieren siempre en MAYUSCULAS!

Nota2: El event delegation es un patron sumamente poderoso que debemos utilizar siempre que sea posible, especialmente cuando el numero de escuchadores de eventos sea relativamente grande o se espera que sea grande.

Esta técnica la utiliza REACT, Angular, Svelte y todos los frameworks, pues cada vez que utilizamos eventos, estos frameworks no agregan directamente a los nos sino que lo agregan al body, al document o cualquier otro elemento que se considera la raíz de la aplicación.

Facundo Martinez

student•

Muchas gracias!!

Jose Manuel Montaño Saenz

student•

Event delegation

Es una solución eficaz para evitar el stopPropagation. Básicamente lo que debemos es colocar nuestro listener en el elemento padre y en la función a ejecutar colocamos una condicional para saber el tipo de selector que disparo el evento, ya con esta información ejecutamos código según el ejecutor del evento.

Este patrón lo debemos usar siempre que sea posible y mas cuando la cantidad de listener es relativamente enorme.

Camilo Perilla

student•

event.target siempre hará referencia al nodo que recibió el evento. Es muy posible que en este ejemplo este nodo sea un H2, IMG, o la etiqueta que muestra el precio. Para mostar la alerta cada vez que se de un click en la card sin importar que etiqueta interna recibio el click, podemos usar event.target.closest('clase de la card'). Usando la clase de la card, podemos obtener su nodo desde un node hijo.

Erlyn David Ascarate Lachi

student•

Oh. Que genial. Me sirvio :D

Daniel David Mármol Rivero

student•

appNode.addEventListener("click", (evento) => {
    if (evento.target.nodeName === "H2"){ 
        window.alert('Hola');
    } //De esta forma sólo funcionará para los títulos en el nodo H2 en el nodo padre document.
});

De esta forma se encarga de manejar todos los elementos y que escuche solo los que requerimos, esto se usa generalmente cuando los eventos y escuchadores son realmente grandes. Todos los framewoks (Angular, Vue.js, React JS, ect) lo usan por debajo agregándolo al body, document o cualquier que ellos consideren como la raíz.

Fernando Quinteros Gutierrez

student•

¿Si deseáramos dejar de usar un evento con esta técnica, cuál sería la mejor forma de manejarlo? me surgió la duda debido a que estamos usando condicionales

Jonathan 🦑 Alvarez

teacher•

Muy buena pregunta!

Todos los eventos se deben registrar con una función:

element.addEventListener('click', miFuncion)

Así que para des-registrar se debe indicar exactamente la misma función:

element.removeEventListener('click', miFuncion)

Es por eso, que si se necesita retirar un eventListener es mala idea hacerlo con funciones anónimas (funciones que no tienen nombre) o funciones inline. Por ejemplo, esta función no hay forma de des-registrarla porque no tiene un nombre que la identifique:

element.addEventListener('click', () => console.log('holita'))