Event propagation
Contenido del curso
Operaciones básicas
Workshop 1: Fetch
Eventos
Workshop 2: Lazy loading
Workshop 3
Librerías relacionadas
Conclusiones
Event propagation
Contenido del curso
Event propagation
Carlos Eduardo Gomez García
Profesor
Jimmy Buriticá Londoño
Estudiante
Andrés Felipe García Rendón
Estudiante
Fernando Quinteros Gutierrez
Estudiante
Jeferson Velásquez
Estudiante
Daniel Flores
Estudiante
Daniel Marquez
Estudiante
Santiago López Daza
Estudiante
Andrés Castellanos
Estudiante
Gilberto Santamaria
Estudiante
Andres Felipe Pinchao Ramirez
Estudiante
Kevin Parra
Estudiante
Lehder Harold Hernandez
Estudiante
Gianluca Aguilar
Estudiante
Jonathan 🦑 Alvarez
ProfesorGianluca Aguilar
Estudiante
Cristian Iñiguez
Estudiante
Nicolás Cualangelo
Estudiante
Joel Eduardo Sánchez Herrera
Estudiante
Anfernee Valera
Estudiante
Oscar J. Carabali
Estudiante
Xavier Flores
Estudiante
Juan Gui Arenas
Estudiante
Brandon Argel Verdeja Domínguez
Estudiante
Juan Diego Loaiza Martinez
Estudiante
Daniel David Mármol Rivero
Estudiante
Jose Barboza
Estudiante
Rodrigo Ramos Xochiteotzin
Estudiante
Roger Colquehuanca
Estudiante
JESSEL DIAZ
Estudiante
Jonathan Forero
Estudiante
Jaime Ortiz
EstudianteJonathan 🦑 Alvarez
ProfesorBá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 👀
Muy bien explicado, como siempre.
Muchas gracias por compartir tus apuntes, Saludos!
🗻 Event propagation
Ideas/conceptos claves
Bubbling es la forma en que se propaga desde lo más bajo hasta lo más alto
Apuntes
node.addEventListener("click", (event) => { event.stopPropagation() // Acciones ... });
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
Fuente
Que buen artículo, muchas gracias! 😁
Buen aporte
Cada vez me gusta más este curso 💚
¿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/
Genial aporte viéndolo desdé el desarrollo e equipos!
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}`) })
En el min 4 aprox, se ve un corte en el video que creo que quedo mal editado.
Esto no es relevante..
Una duda para que sirve esto?
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
Muchas Gracias!!
Usar stopPropagation es muy útil cuando creamos modales. Les dejo un ejemplo https://codepen.io/cristianiniguez/pen/oNoqGqE
Excelente ejemplo. ¡Gracias! :clap:
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()
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.
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.
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?
currentTarget es un generico para cual tipo de tag HTML, si te fijas no cualquier tag tiene un target, pero "si" un currenttarget
Excelente curso :)
Event propagation
El estándar de eventos del DOM describe 3 fases de la propagación de eventos:
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()
Buen curso hasta el momento
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}`) })
la propagación es como una gota de agua desde ese punto se propaga a todo el DOM.
Buena metáfora
genial, vi en algunos Sitio, mas especificos forms donde usa esto de eventStoppropagation ahora entiendo mejor
Como podria hacer para evitar que un evento de un elemento padre se dispare si hago click en alguno de sus elementos hijos?
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.
¿Cómo se hace eventos personalizados?
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