Event propagation

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

Carlos Eduardo Gomez García

teacher•

Básicamente la propagación de eventos se produce cuando tienes puestos algunos eventos en contenedores que son hijos de otro, por ejemplo:

<div id="div1">
    <div id="div2">
        <div id="div3">
            Hola
        </div>
    </div>
</div>

Si le ponemos un event listener a los 3 divs, y clicas dentro del div 3, también estás clicando el div2 (porque el div3 está dentro del div2), y a su vez estás clicando el div1 (porque estos 2 divs están dentro de div1), por tanto, el evento se va a propagar hacia los 3 divs. . La forma de deterlo es usando el método stopPropagation() que viene dentro del argumento event que cualquier evento nos provee, por tanto, yo puedo decirle al div3: "Oiga, yo solo lo quiero clicar a usted, no a los demás, sí, ya se que usted está dentro de los demás, pero yo solo lo quiero a usted", de tal forma que al event listener del programation le puedo poner:

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

    event.stopPropagation()

});

De esta forma, el evento de div2 y div1 no serán ejecutados . Dato curioso, cuando tu defines un elemento con un ID en HTML, en JavaScript se crea automágicamente una variable con ese id que creaste, por eso es completamente posible que yo pueda usar la variable div3 sin tener que seleccionar el elemento 👀

Jimmy Buriticá Londoño

student•

Muy bien explicado, como siempre.

Andrés Felipe García Rendón

student•

Muchas gracias por compartir tus apuntes, Saludos!

Fernando Quinteros Gutierrez

student•

🗻 Event propagation

Ideas/conceptos claves

Bubbling es la forma en que se propaga desde lo más bajo hasta lo más alto

Apuntes

El DOM es un arbol que renderiza nodos de forma jerárquica
- Cuando un evento sucede se propaga a lo largo de ese nodo
Los eventos suceden desde el elemento más interno hacia afuera
- Propagándose entre cada padre que tiene el elemento escuchado
Si deseamos borrar este comportamiento podemos usar el parámetro de evento

node.addEventListener("click", (event) => {
	event.stopPropagation()
	// Acciones ...
});

Se debe tener cuidado con este tipo de operaciones por que puede existir códigos de otras personas o de librerías que necesiten este tipo de eventos
Por lo general se debería dejar que los eventos fluyan por su ruta

RESUMEN: Cuando se tiene eventos estos pueden flotar desde el más específico hasta el más grande, si se desea quitar este comportamiento se puede usar el método del parámetro del evento stopPropagation por lo general no es necesario usar este método

Jeferson Velásquez

student•

Fuente

Daniel Flores

student•

Que buen artículo, muchas gracias! 😁

Daniel Marquez

student•

Buen aporte

Santiago López Daza

student•

Cada vez me gusta más este curso 💚

Andrés Castellanos

student•

¿Por qué no usar el stopPropagation?

Al usar el stopPropagation estamos impidiendo que elementos padre conozcan determinado evento de algún hijo, ejemplo: Al hacer click en un botón con stopPropagation. El body nunca sabrá que hice click en él. . Esto es una fuente de "sideEffects" que son el tipo de bugs más difíciles de notar. ¿Que pasa si otro desarrollador desea que el body escuche el click del botón? programará confiado en que hay propagación. Como en este caso se detuvo, la única solución es eliminar el "stopPropagation" rompiendo el código que nosotros hicimos. . En prácticamente todos los escenarios se puede sustituir el stopPropagation por una solución que no altere el comportamiento global de los eventos, evitando asi side effects. . Más info: https://css-tricks.com/dangers-stopping-event-propagation/

Gilberto Santamaria

student•

Genial aporte viéndolo desdé el desarrollo e equipos!

Andres Felipe Pinchao Ramirez

student•

Mis Apuntes Event Propagation 🦠


// imprimiremos el evento click para ver toda su informacion
const accion = (event) => console.log(event)

$0.addEventListener('click', accion)

/* Bucamos la propiedad llamada target que es la que nos dice cual elemento 
se esta ejecutando, target representa un nodo cuando utilizamos createElement
es igual a lo que esta dentro del target 


Dentro del target hay una propiedad que se llama nodeName que contiene
el nombre del nodo


*/

const accion = (event) =>{console.log(`Hola desde ${event.currentTarget.nodeName}`)}

//obtenemos el elemento al cual le agregaremos el evento

const avocado = document.querySelector('id');

//obtenemos el padre del elemento

const card = document.querySelector('id');

//obtenos el body

const body = document.querySelector('body')

//agregamos el mismo evento a cada nodo

avocado.addEventListener('click', accion);

card.addEventListener('click', accion);

body.addEventListener('click', accion)

/* cuando damos click en el elemento hijo 
   vemos que aunque el evento sucedio en el primer elemento este
   se propago hasta el elemento padre que seria hasta el elemento
   mas externo que tambien esta escuchando el mismo evento que en
   este caso es el body

    Hola desde + H2
    Hola desde + DIV
    Hola desde + BODY

   Y si unicamente damos click en un elemento padre del que anteriormente
   le dimos click vemos como el evento propaga desde ahi hasta
   el elemento mas externo en este caso el body

   Hola desde + DIV
   Hola desde + BODY

    Entonces sabremos que desde el elemento que inicia hacia arriba
    el evento se propagara
*/

/*

    La propagacion de eventos se puede detener usando la misma web API

    La forma de deterlo es usando el método stopPropagation() que viene
    dentro del argumento event que cualquier evento nos provee

*/


 const accion = (event) =>{console.log(`Hola desde ${event.currentTarget.nodeName}`)}

 //obtenemos los elementos y le aplicamos los eventos
 const body = document.querySelector('body');

 body.addEventListener('click', accion);

 const h3 = document.querySelector('h3');

 h3.addEventListener('click', (evento) =>{

 //utilizamos el metodo stopPropagation y con esto pararemos la propagacion
 // es como decirle al elemento que solo queremos ejecutarlo a el y a los demas no
    evento.stopPropagation()
    console.log(`Hola desde: + ${evento.currentTarget.nodeName}`)



})

Kevin Parra

student•

En el min 4 aprox, se ve un corte en el video que creo que quedo mal editado.

Lehder Harold Hernandez

student•

Esto no es relevante..

Gianluca Aguilar

student•

Una duda para que sirve esto?

Jonathan 🦑 Alvarez

teacher•

Hola Gianluca!

Super válida tu pregunta, entender el event propagation es clave para trabajar con el DOM e interactuar con él, entenderlo garantizar que sepas cuando si y cuando no usar cosas como event.preventDefault o event.stopPropagation, además de un patrón muy usado como Event Delegation que lo encontrarás más adelante en este curso :D

Gianluca Aguilar

student•

Muchas Gracias!!

Cristian Iñiguez

student•

Usar stopPropagation es muy útil cuando creamos modales. Les dejo un ejemplo https://codepen.io/cristianiniguez/pen/oNoqGqE

Nicolás Cualangelo

student•

Excelente ejemplo. ¡Gracias! :clap:

Joel Eduardo Sánchez Herrera

student•

El don es un arbol que renderiza nodos de forma gerarcica. cuando un evento sucede los eventos se propagan por todo ese nodo. Siempre hay que tener en cuenta que los elementos suceden desde el elemento mas interno hacia afuera. Este concepto se conoce como Bubling o burbujante. Hace alusion a la forma como un evento se hace como burbuja hacia el padre.

En los datos que nos retorna los evenetos podemos ver un valor llamado 'target' que es el nodo al que estamos seleccionando y dentro del target hay otro valor llamado NodeName que es el nombre del nodo.

Como funciona este event propagation es que cuando tenemos un nodo que es HIJO de otro nodo, pues al accionarse el evento ,este se propaga por su padre y por el que seria su abuelo.

Si queremos evitar la propagacion en un metodo podemos utilizar la funcion:

evento.stopPropagation()

Anfernee Valera

student•

Event Propagation

Cuando un evento sucede, se propaga a cada elemento padre de ese nodo.

La propagación ocurre de adentro hacia afuera.

Bubling

Hace alusión a como un evento se va a ir hacia arriba como burbujas hasta el ultimo padre que es la raíz del documento.

event.target: Nos Dice cual es el elemento que se esta ejecutando en ese momento
- El target representa un nodo.
- Cuando usamos createElement se refiere a esto.
event.nodeName: Es una propiedad dentro de la propiedad target que tiene el nombre del node
currentTarget: Propiedad para acceder al nodo donde se está ejecutando el evento.

La propagación de eventos ocurre cuando le agregamos un mismo tipo de evento a a distintos elementos. Estos elementos pueden tener distintos callbacks pero si su evento es el mismo se propagará y activará todos.

Oscar J. Carabali

student•

Porque Jonathan utiliza (event.currentTarget.nodeName) si tambien pudo haber usado (event.target.nodeName) ???

Es decir:

//esta accion
const accion = (event) => console.log(`hello ${event.currentTarget.nodeName}`);

//y esta accion
const accion = (event) => console.log(`hello ${event.target.nodeName}`);

Dan el mismo resultado, estoy en lo correcto o hay algo que no se?

Xavier Flores

student•

currentTarget es un generico para cual tipo de tag HTML, si te fijas no cualquier tag tiene un target, pero "si" un currenttarget

Juan Gui Arenas

student•

Excelente curso :)

Brandon Argel Verdeja Domínguez

student•

Event propagation

El estándar de eventos del DOM describe 3 fases de la propagación de eventos:

Fase de captura (Capturing): El evento desciende desde el elemento raíz hasta el elemento objetivo.
Fase de objetivo (Objective): El evento alcanza al elemento.
Fase de propagación (Bubbling): El evento asciende desde el elemento objetivo hasta el elemento raíz.

Es importante tener esto en cuenta porque en la fase de propagación también se estarán escuchando los eventos de los nodos padres y se ejecutarán en ese orden.

Para detener la propagación podemos utilizar event.stopPropagation()

Juan Diego Loaiza Martinez

student•

Buen curso hasta el momento

Daniel David Mármol Rivero

student•

Propagación de eventos:

const accion = (evento) => {console.log(`Hola desde: + ${event.currentTarget.nodeName}`)}

$0.addEventListener('click', accion) //Al h2
undefined
$0.addEventListener('click', accion) //Al div
undefined
$0.addEventListener('click', accion) // AL body
undefined

Detención de la propagación de eventos

$0.addEventListener('click', (evento) => { // Agregación de stopPropagation en H3
    evento.stopPropagation()
    console.log(`Hola desde: + ${event.currentTarget.nodeName}`)
})

Jose Barboza

student•

la propagación es como una gota de agua desde ese punto se propaga a todo el DOM.

Rodrigo Ramos Xochiteotzin

student•

Buena metáfora

Roger Colquehuanca

student•

genial, vi en algunos Sitio, mas especificos forms donde usa esto de eventStoppropagation ahora entiendo mejor

JESSEL DIAZ

student•

Como podria hacer para evitar que un evento de un elemento padre se dispare si hago click en alguno de sus elementos hijos?

Jonathan Forero

student•

Recuerda que la propagación ocurre desde los hijos hacia los padres, no al revés.

En JavaScript, puedes detener la propagación de eventos de un elemento hijo a su elemento padre utilizando el método stopPropagation() del objeto de evento. Este método evita que el evento se propague más allá del elemento actual.

Aquí tienes un ejemplo de cómo podrías usar stopPropagation() para evitar que un evento se dispare en el elemento padre cuando se hace clic en alguno de sus elementos hijos:

// Obtén el elemento padre y los elementos hijos
var parentElement = document.getElementById('parent');
var childElements = document.getElementsByClassName('child');

// Agrega un controlador de eventos clic a cada elemento hijo
for (var i = 0; i < childElements.length; i++) {
  childElements[i].addEventListener('click', function(event) {
    event.stopPropagation(); // Detiene la propagación del evento
    // Realiza cualquier otra acción necesaria en los elementos hijos
  });
}

// Agrega un controlador de eventos clic al elemento padre
parentElement.addEventListener('click', function() {
  // Este código solo se ejecutará si se hace clic en el elemento padre directamente, no en los hijos
});

En este ejemplo, primero obtienes el elemento padre y los elementos hijos utilizando los métodos getElementById y getElementsByClassName, respectivamente. Luego, agregas un controlador de eventos clic a cada elemento hijo en un bucle for. Dentro del controlador de eventos de cada elemento hijo, llamas a stopPropagation() para detener la propagación del evento.

Finalmente, agregas un controlador de eventos clic al elemento padre que solo se ejecutará si se hace clic directamente en el elemento padre y no en los elementos hijos.

Jaime Ortiz

student•

¿Cómo se hace eventos personalizados?

Jonathan 🦑 Alvarez

teacher•

Muy buena pregunta @jaalorsa519 :)

Existe un constructor llamado Event que permite crear nuevos eventos y agregarles propiedades.

Aquí hay una guía actual de cómo usarlo: https://blog.logrocket.com/custom-events-in-javascript-a-complete-guide/

No obstante, a menos que solo sea experimentación, te cuento que nunca he visto real necesidad de crearlos.

Algunos frameworks permiten hacerlo mucho más fácil, pero hoy en día no es muy común.

Saludo

// imprimiremos el evento click para ver toda su informacion
const accion = (event) => console.log(event)

$0.addEventListener('click', accion)

/* Bucamos la propiedad llamada target que es la que nos dice cual elemento 
se esta ejecutando, target representa un nodo cuando utilizamos createElement
es igual a lo que esta dentro del target 


Dentro del target hay una propiedad que se llama nodeName que contiene
el nombre del nodo


*/

const accion = (event) =>{console.log(`Hola desde ${event.currentTarget.nodeName}`)}

//obtenemos el elemento al cual le agregaremos el evento

const avocado = document.querySelector('id');

//obtenemos el padre del elemento

const card = document.querySelector('id');

//obtenos el body

const body = document.querySelector('body')

//agregamos el mismo evento a cada nodo

avocado.addEventListener('click', accion);

card.addEventListener('click', accion);

body.addEventListener('click', accion)

/* cuando damos click en el elemento hijo 
   vemos que aunque el evento sucedio en el primer elemento este
   se propago hasta el elemento padre que seria hasta el elemento
   mas externo que tambien esta escuchando el mismo evento que en
   este caso es el body

    Hola desde + H2
    Hola desde + DIV
    Hola desde + BODY

   Y si unicamente damos click en un elemento padre del que anteriormente
   le dimos click vemos como el evento propaga desde ahi hasta
   el elemento mas externo en este caso el body

   Hola desde + DIV
   Hola desde + BODY

    Entonces sabremos que desde el elemento que inicia hacia arriba
    el evento se propagara
*/

/*

    La propagacion de eventos se puede detener usando la misma web API

    La forma de deterlo es usando el método stopPropagation() que viene
    dentro del argumento event que cualquier evento nos provee

*/


 const accion = (event) =>{console.log(`Hola desde ${event.currentTarget.nodeName}`)}

 //obtenemos los elementos y le aplicamos los eventos
 const body = document.querySelector('body');

 body.addEventListener('click', accion);

 const h3 = document.querySelector('h3');

 h3.addEventListener('click', (evento) =>{

 //utilizamos el metodo stopPropagation y con esto pararemos la propagacion
 // es como decirle al elemento que solo queremos ejecutarlo a el y a los demas no
    evento.stopPropagation()
    console.log(`Hola desde: + ${evento.currentTarget.nodeName}`)



})

const accion = (evento) => {console.log(`Hola desde: + ${event.currentTarget.nodeName}`)}

$0.addEventListener('click', accion) //Al h2
undefined
$0.addEventListener('click', accion) //Al div
undefined
$0.addEventListener('click', accion) // AL body
undefined

// Obtén el elemento padre y los elementos hijos
var parentElement = document.getElementById('parent');
var childElements = document.getElementsByClassName('child');

// Agrega un controlador de eventos clic a cada elemento hijo
for (var i = 0; i < childElements.length; i++) {
  childElements[i].addEventListener('click', function(event) {
    event.stopPropagation(); // Detiene la propagación del evento
    // Realiza cualquier otra acción necesaria en los elementos hijos
  });
}

// Agrega un controlador de eventos clic al elemento padre
parentElement.addEventListener('click', function() {
  // Este código solo se ejecutará si se hace clic en el elemento padre directamente, no en los hijos
});

Event propagation

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM