Event propagation

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 👀

🗻 Event propagation

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

• 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

Fuente

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}`)



})

Cada vez me gusta más este curso 💚

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()

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

¿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/

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.

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

Event propagation

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

1. Fase de captura (Capturing): El evento desciende desde el elemento raíz hasta el elemento objetivo.
2. Fase de objetivo (Objective): El evento alcanza al elemento.
3. 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()

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

Excelente curso 😃

(￣y▽,￣)╭ Comparto mis notas de la clase, es un poco complicado de entender el tema del event propagation, recomiendo repasar la clase a la ves que se toman notas en cóigo.
.
Cuando hablamos de eventos hay un tema que siempre hay que tomar en cuenta. Recordando que el DOM es un árbol que renderiza nodos de forma jerárquica: cuando un evento sucede, los eventos se propagan a lo largo de todo el nodo inplicado, esto se llama propagación (donde los eventos suceden del elemento mas interno hacia afuera).

Tomando por ejemplo: si damos clic en un botón y ese botón tiene un “EventListener” este listener se va a propagar a cada uno de los padres de ese botón, a esto se le conoce como bubbling, o burbujeo.

Para detener la propagación de un evento:

// usando la propiedad "stopPropagation"
event.stopPropagation();

Nota:
Si bien tenemos control sobre la propagación de eventos, tenemos que ser muy cauteloso al momento de usar esta características, dado que puede darse el caso e que otras librerías quieran escuchar un evento en concreto, pero que nosotros en algún lugar o momento del DOM los estamos deteniendo.

De manera general, se debería evitar evitar detener la propagación de eventos y dejar que el DOM funcione de manera predeterminada.

Ejemplo MDN

Me gustó mucho conocer la concatenación de strings en ES6.

`Texto ${variable} texto`

Propagacion de eventos:

El DOM es un arbol que renderiza nodos de froma gerargica. Y cuando un evento sucede, los eventos se propagan a los largo de los nodos. Para entender esto, la mejor manera de entendelo es sabiendo que la propagacion de eventos sucede desde el elemento mas interno hacia afuera. Es decir, si yo presiono un boton y ese tiene un listener, el listener sera escuchado en todos los nodos padres del boton. Este concepto se conoce como BUBBLING, porque el evento hara como burbujitas, que van SUBIENDO…

Dame un ejemplo: Sencillo… supongamos que a un h2, y al BODY, imaginante que es un super elemento padre del h2, a ambos le pongo addEventLsitener,Yo ahora testeando TOCO al h2, y PUM, el addEventLsitener se ejecuta en el h2, claro, PERO TAMBIEN EN EL BODY! llego hasta arriba! eso hace entender que si yo a cada elemento le ponia un addEventListner, mama mia, todo se iban a ejutar como domino, cuando yo solo queria ejecutar 1! PROBLEMON!

DETENGAMOSLO:

const email = document.getElementById('email')

email.addEventListener('click', (evento) => {
	evento.stopPropagation();
console.log(`hola desde: ${evento.currentTarget.nodeName}`)	
})
//Ahora, si toco el mail, el evento sucedera solo en el mail, por lo tano, supongamos que hay un h3 ariba del mail, y este tiene su propio evento, entonces el h3, NO EJECUTARA SU EVENTO, porque ya detuvimos la propagacion con: 
evento.stopPropagation();

//Y asi lo puedo hacer con todos los elementos

OJO, quizas otras personas o librerias si quieren escuchar el evento, por lo tanto, hay que tener cuidado y fijarse si realmente hay que detenrlo si o si.

Reaccionar a lo que sucede en el DOM

Js es un lenguaje basado en evento y toda la dinámica ocurre cuando escuchamos estos evento ya que podemos reaccionar ante ellos, para utilizar evento los agregamos con node.addEventListener y para removerlos node.removeEventListener.

Al agregar el listener recibirá unos parámetros, el primer parámetro será tipo de evento y el segundo una función donde se realizara la acción a tomar cuando el evento sea capturado.

addEventListener

Evento 'click', detecta la acción click al elemento que se le otorgo. :

const titulo = document.querySelector('#titulo__main');

const accion = () => {
  console.log('Haz dado click');
}

titulo.addEventListener('click', accion);

Evento 'input', detecta la pulsación del teclado, como su nombre lo indica es cuando estamos ingresando datos a un input :

const input = document.querySelector('#nombre');

const accion = () => {
  console.log('Ingresaste algún dato');
}

input.addEventListener('input', accion);

A este evento también podemos otorgarle un poco de mas de lógica :

const input = document.querySelector('#nombre');

const accion = (ev) => {
  if(ev.data == 'j') {
    console.log('Escribiste la j');
  }  
}

input.addEventListener('input', accion);

El parámetro ev es el evento que devuelve el input, en el contiene información valiosa, por ejemplo, el elemento donde se ocurrió el evento, su contenido y mucho mas…

removeEventListener

Para remover listeners :

titulo.removeEventListener('click', accion);
input.removeEventListener('input', accion);

Es importante tener en cuenta que las funciones que pasamos por parámetro a los listeners no deben ser anónimas ya que no lograremos eliminarlas.

Event propagation

El DOM es un árbol que renderiza nodos de forma jerárquica y cuando se agrega un evento, este se propaga a lo largo de ese nodo.

Esto quiere decir que un elemento hijo activa su evento ‘x’, este se propagara en toda su ramificación hasta llegar a el elemento padre de mayor jerarquía y en su paso activara los demás eventos que encuentre.

podemos asemejar esto como un burbuja de aire que sube a la superficie. La propagación de evento es natural pero no es beneficioso para nuestro DOM, por esto debemos hacer que no suceda.

const parrafo = document.querySelector('p');
const contenedor = document.querySelector('.contenedor');


const mostrarMensaje = (ev) => {
  ev.stopPropagation();
  console.log(ev.currentTarget.nodeName);
}

document.body.addEventListener('click', mostrarMensaje);
contenedor.addEventListener('click', mostrarMensaje);
parrafo.addEventListener('click', mostrarMensaje);

Detener la propagación del evento puede ocasionar conflictos con otras librerías o otras personas si querrá que la propagación se genere.

// Seleccionar nodos
const superParent = document.querySelector('body');
const parent = document.querySelector('div');
const title = document.querySelector('h2');


// Crear función de acción
const action = (event) => {
    console.log(event.currentTarget.nodeName);
}

// Detectar evento, ald ar click en un elemento estas acciones se propagan en los padres que tengan el evento también
title.addEventListener('click', action);
parent.addEventListener('click', action);
superParent.addEventListener('click', action);
// Aquí como resultado tendremos tres mensajes al evento

// Creando otro evento click de otro elemento
title.addEventListener('click', (event) => {
    event.stopPropagation();
    console.log(event.currentTarget.nodeName);
});

// En este caso se ejecutará solamente este evento si doy click en dicho elemento y los eventos agregado a los padres
// se paralizan porque he decidido parar la propagación de eventos
const title2 = document.querySelector('h3');


/*
Diferencia entre target y CurrentTarget

event.target: devuelve el elemento que desencadenó el evento
event.currentTarget: devuelve el elemento vinculado al evento

*/

Lo utiliaba por que me funcionaba para lo que ocupaba, pero nunca supe como trabajaba la propagación hasta hoy. Gracias

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.

Genial

Siempre toma en cuenta que los eventos se propagan desde el elemento más interno hacía afuera. A esto se le llama Bubble.

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

$0.addEventListener('click',accion) //titulo
$0.addEventListener('click',accion) //div
$0.addEventListener('click',accion) //body

/*
Resultado is hacemos click en el titulo:
Hola desde: H2
Hola desde: DIV
Hola desde: BODY

Resultado is hacemos click en el div:
Hola desde: DIV
Hola desde: BODY

Resultado is hacemos click en el body:
Hola desde: BODY
*/

También podemos evitar la propagación:

$0.addEventListener('click', event => {
  event.stopPropagation();
  console.log(`Hola desde: ${event.currentTarget.nodeName}`);
});

Pero por lo general no usaremos esto y deberiamos dejar que el DOM funcione como ya lo hace.