Curso JavaScript: 75. DOM: stopPropagation & preventDefault -

En este video te explico cómo detener la propagación de los eventos (#stopPropagation) y como prevenir los comportamientos por defecto (#preventDefault) en el #DOM de #JavaScript.
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/...
📖 Mis notas sobre JSON jonmircha.com/...
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal kzbin.info... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
📫 Suscríbete a mi lista de correo tinyletter.com...

[@sofiazapata2906]

no entiendo como este curso no tiene mas de 100k de vistas, es el mejor curso de JavaScript que puede existir. Gracias Jon por todo lo que nos das !! Saludos desde Bs As Argentina

[@jonmircha]

Comparte para llegar a más personas ;)

[@ratasobreviviendoenlascloa4847]

Es que somos arios Wey. En Argenzuela es comer o ser comido.

[@levialviter2302]

Un video de una papa durmiendo tiene más vistas que uno donde te dan tips para estudiar en Harvard. No me extraña que esto también pase.

[@marcelol2387]

@@levialviter2302 pasa el link de la papa

[@mastermaster153]

KZbin SOLO PROMUEVE LA ESTUPIDEZ

[@ronnymarte4212]

jaja Minuto 3:25 john cerrando la ventana de la misma forma que lo hizo en 2 videos anteriores pense que estaba repitiendo el video. Saludos para John y kenai el mejor curso de js.

[@jonmircha]

😅

[@EloyColirio]

Cada vez mejor este curso

[@jonmircha]

😉👋🏻

[@Juicio87]

Eres el mejor profesor!

[@jonmircha]

🥰🙌🏻

[@hernansanabria9685]

sept 11 1969**Nov 16 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

Gracias, saludos👋🏻😉

[@carlosjavierorozco8418]

Un tema que hay que entender muy bien. Gracias me quedo bastante claro.

[@jonmircha]

👋🏻😉

[@luchogrz273]

Excelente el curso! En un momento pense que los musicos iban a entrar a tu dormitorio

[@jonmircha]

😅

[@joelleiva6952]

Gracias por la clase, cada vez mas cerca de los ejercicios practicos!! Voy a tratar de todas las clases compartir mis apuntes, aca les dejo los de esta clase: /*👉 Van a haber veces donde no requeramos que nuestro evento se propague hacia los elementos hijos o padres, dependiendo de la fase que estemos trabajando, y entonces solamente se ejecute una sola vez la programacion de tu funcion manejadora //*👉Tambien van a haber veces donde hay ciertos elementos del DOM que tienene comportamientos o eventos ya por defecto. Por ejemplo, pensa en el boton submit que tiene un formulario. Sin necesidad que nosotros programamemos con JS el formulario, a la hora que presionas un input de tipo submmit dentro de un formulario ese formulario se procesa //*👉 Por ejemplo cuando nosotros estamos controlando el scroll de las barras de desplazamiento, ya sea con las flechas o con la ruedita del mouse, ese es el comportamiento default que justamente tienen las teclas de arriba y abajo o de izquierda y derecha, en el caso de desplazamiento horizontal, y la rueda del mouse. Otro comportamiento por defecto seria los comportamientos que tienen los enlaces, cuando le das click a un enlace te va a llevar al contenido que tenga ese link en su propiedad href //* 👀 Pero van a haber veces que por ejemplo, mandas un formulario y en lugar de que se procese de manera convencional, vos lo que vas a hacer con JS es solicitar una peticion asincrona via AJAX y esa peticion consulta una base de datos que va a tardar. Cuando este lista la respuesta te va a responder, entonces ahi tendriamos que desactivar el comportamiento de que el formulario se procese de forma automatica //? 🤔 Entonces como podemos prevenir esa accion por defecto que tengan nuestro elementos del DOM? Facil, hay que ejectuar un metodo que esta dentro del evento en si, me refiero a: event.preventDefault(), esto lo que hace es eliminar el comportamiento que tiene nuestro elemento por default. Que en el caso de los enlaces es redirigirnos hacia la direccion que tenga dentro de su atributo href const $divsEventos = document.querySelectorAll(".eventos-flujo div"), $linkEventos = document.querySelector(".eventos-flujo a"); function flujoEventos(e) { console.log( `Hola te saluda ${this.className}, el click lo originó ${e.target.className}` ); e.stopPropagation();//👈Este metodo va a eliminar la propagacion } $divsEventos.forEach(div => { div.addEventListener("click", flujoEventos) }); $linkEventos.addEventListener("click", e => { alert("Hola soy tu amigo y docente digital... Jonathan MirCha") e.preventDefault()//👈Este metodo va a eliminar el comportamiento por defecto e.stopPropagation();//👈Este metodo va a eliminar la propagacion }) //* Al darle click al enlace, ya que esta dentro de la div 'tres', el evento se propaga y se ejecuta el evento que le asigne a la div 'tres'

[@jonmircha]

😉👍🏻

[@srcuyo]

no hace falta, es un video en el que el usuario puede pararse en cualquier punto y volver a escuchar(+ver) la explicacion perfecta del amigo y docente digital jm

[@ronaldm.r]

yo usaba el e.preventDefault() y ni sabia que este era originario del evento en si, este curso es genial!

[@Wiiiiizard]

🧙‍♂Muchas graias, muy buen curso!!!

[@jonmircha]

Gracias por comentar

[@leonoracosta5531]

Eres muy educado Jon, no solo aprendo de código en tu curso sino también tienen un poco de clase referido a lo humanístico para quién se percata! Seguiré aprendiendo, nos vemos en la línea final!

[@jonmircha]

🤓🙌

[@braianrico4422]

Ayer eran 85100, ya hoy somos 85200 y poco a poco serán más y más suscriptores a tu canal. El mundo debe de conocer tu valiosa labor. Mil gracias Jon, de verdad que todo tu material es claro y bien planificado...... Bendiciones y saludos a Batman y Kenai jajaja 🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

😉🙌🏻🦇

[@armandoWebDev]

Una alternativa al evento click es uno llamado pointerdown que pertenece a los "Pointer events". Es útil para disparar con un solo evento un handler desde en un equipo con mouse (desktop o laptop) o un dispositivo móvil.

[@jonmircha]

👋🏻😉

[@heimancastro1954]

excelente clase maestro 😁😁😁😁

[@jonmircha]

Hola, muchas gracias

[@edgarzambrano3505]

que buena clase profe muchas gracias

[@jonmircha]

Con mucho gusto

[@timawid]

Estas clases ayudan muchísimo ✅ quiero llegar a los ejercicios 😊

[@jonmircha]

Con mucho gusto👋🏻😉

[@simonmontenegro181]

amo esta lista, hace timepo lo vipara aprender javascript y ahora 1 años despues vengo a aprender o repasar temas XD

[@jonmircha]

👋🏻😉

[@gbarajas2971]

Jon mircha es el julio profe de js ❤️

[@tongastonga22]

Gracias Sensei!

[@jonmircha]

👋🏻😉

[@srcuyo]

vamos muy bien, a medida que se va aprendiendo va aumentando la ansiedad para poder aplicar todo en un proyecto. Gracias Jon

[@jonmircha]

😉👋🏻

[@mastermaster153]

ESTE CURSO ES UNA JOYA!!!!!!!! MEJOR QUE OTROS DE PAGA

[@jonmircha]

😉👌🏻

[@Ni_idea_de_tecnologia]

Cada día me gusta más. Muchas gracias Sr. Mircha

[@jonmircha]

👋🏻😉

[@aaronchavez7168]

Master class! gracias jon :)

[@jonmircha]

😉👋🏻

[@fadelsalem4172]

Uno de los mas preferidos cursos. Estoy aprediendo mucho. Muchas gracias Jon!

[@jonmircha]

Excelente!

[@nachosanabria6942]

gracias excelente video

[@jonmircha]

😉👍🏻

[@RobertCastilloC]

stopPropagation() buen método

[@jonmircha]

😉

[@johnherrera5913]

Master! Muchas gracias por todo el material!!!

[@jonmircha]

A la orden

[@NickelFirepowerNico]

Excelente, al fin llegue al 75 y voy caminando como un crack, gracias por las enseñanzas Jon querido, Muchas Bendiciones!

[@jonmircha]

Felicidades!🥰🙌🏻

[@leonardoprone5967]

Se entendió perfecto, gracias Jon!

[@jonmircha]

Excelente!

[@developer1328]

el preventDefault lo usaba siempre en mis formularios con Jquery, fundamental en AJAX

[@jonmircha]

👌

[@victormontivero1998]

Gran explicación, como muchos venia usando el preventDefault por copiar algunos códigos practicando formularios, pero jamás me frene en ver que significaba, ahora veo que tiene muchos más usos.

[@jonmircha]

;)

[@alveiroceron]

Hasta ahora entiendo el e.preventDefault, muchas gracias, maestro... :)

[@jonmircha]

😉✌🏻

[@cumpaMira]

Gracias profe! Excelente!

[@mercurioazul630]

Me has quitado la duda de el preventDefault() gracias.

[@jonmircha]

De nada :)

[@cxT9344]

Cómo se continua con la acción de la etiqueta una vez hecho el preventDefault? En qué parte del mozilla developer que puede revisar?

[@jonmircha]

tendrías que ejecutar manualmente con JS la redirección con location.href

[@josefabianbeltranmeza6914]

Impecable como siempre Jon, muchas gracias por compartir tanto conocimiento. Dios te bendiga.

[@jonmircha]

Gracias por tus bendiciones !!!

[@tavospok]

Muy buen contenido, Jon. Claro y al grano. Gracias de nuevo!

[@jonmircha]

Gracias!

[@nancynardelli5466]

Gracias!

[@jonmircha]

👋🏻😉

[@carlesbautista8293]

Muchas gracias Jonathan, es muy interesante todo lo que nos enseñas :)

[@juanmcalvino]

Buenas!, comentario constructivo , un antipop te ayudaria mucho en el sonido.

[@jonmircha]

😉👍🏻

[@elmatuamvs5204]

crackk!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@jonmircha]

🙈

[@josedaniel3316]

Excelente video tio jon eres un crack!!!

[@jonmircha]

Gracias!

[@cristianfernando2951]

muy buenos los videos! se aprende bastante bien

[@jonmircha]

Muchas gracias!

[@kikemadrigalr]

Saludos Jon.. La verdad nunca había visto este tema de propagación de eventos, pero viéndolo en estos últimos vídeos me surgió una duda. La propagación de los eventos solo se da en elemento que son padres e hijos.. Cuando están al mismo nivel es decir son hermanos no se da???

[@jonmircha]

Son dos flujos diferentes, si tienes 2 hermanos cada uno tiene su propia propagación :)

[@facundogutierrez1132]

Hola Jon, que pasa si en la delegacion de eventos en lugar de usar el document usamos window.addEventListener? porque estaba queriendo hacer que antes de que cargue la pagina suceda algo y darle una transicion, pero con el document no lo realizaba. Me preguntaba si en otros casos como por ejemplo eventos de teclado o del mouse si seria incorrecto usar window?. saludos

[@jonmircha]

Pues el window, finalmente es padre de todo, incluyendo el document, inténtalo y nos cuentas

[@yovanyescobarrojas2041]

calma amigo ,el siguiente video habla de la delegación de eventos vamos despacio

[@DiegoMejia1310]

Me pareció curioso que puse en modo captura la función manejadora y el link que está dentro del div 3 se comportó de manera natural, es decir, me redireccionó y cabe destacar que yo estaba utilizando el preventDefault

[@christianosorio9239]

Oye si! Que raro, si ya averiguaste el porqué agradecido de que me pases los link de donde sacaste la info o comentes tu punto de vista. Excelente observación

[@gabrielcastillo1454]

Buena observación, tienes alguna respuesta a ese comportamiento ?. Si es así, por favor compártelo.

[@PROGAMERXable]

@@gabrielcastillo1454 pasen su codigo pls, para verlo y encontrar el posible error

[@ejop9681]

Se ejecuta de manera natural ya que el e.stopPropagation(); que esta dentro de la funcion flujoEventos no permite que continue el caption desde el div 1 al div 2 y luego al div 3, ahi se interrumpe el ciclo. Por lo tanto, nunca se entra al arrow function del $linkEventos.addEventListener donde esta el alert y el e.preventDefault()

[@danielfabiani4468]

yyyyyyyyy..........gracias.......hasta mañana.

[@jonmircha]

Igualmente!

[@feduardohuarangaquispe168]

Excelente contenido!!! 👏👏. Profe, ¿puedo empezar con el curso de React en paralelo, o termino primero todo el curso de Js?, Me encuentro hasta en esta clase. 🙋‍♂️

[@jonmircha]

Primero termina este

[@nihil_um]

Yo siempre me encuentro en un problema cuando uso la delegación de eventos del padre al hijo y los hijos tienen a su vez varios hijos y quiero capturar el clic en un elemento del DOM intermedio

[@jonmircha]

Ve el video de mañana, el número 76, ahí te enseñaré a lidiar con ese problema :)

[@nihil_um]

@@jonmircha Espero con expectación.

[@Jns67801]

Pregunta, al usar el preventDefault() en formularios como hago para que después tenga el comportamiento normal?, Osea que se envié el formulario, obvio sin quitar el preventDefault

[@jonmircha]

ejecuta el metodo submit del form y listo

[@davinchocamaron646]

Hola profe, quisiera saber en js de que sirve esa propagacion?porque existe si afecta al rendimiento y al programador no le conviene usarlo?

[@jimmychan6454]

Si, la propagación afecta al rendimiento, sirve para que al momento de ejecutar un evento este pueda ser capturado en cualquier nivel del DOM, podemos detener esa propagación en cualquier nivel del DOM.

[@mundomagupe6088]

Hola jhon gracias por el contenido a sido de mucha ayuda.. Tengo una pregunta, en esta fracción de código mi navegador arroja error, $linkEventos.addEventListener("click",(e)=>{ alert("Hola Mao no te rindas que esta muy cerca de ser programador"); e.preventDefault(); e.stopPropagation(); }); y no ejecuta el alert, dice que ( $linkEventos.addEventListener ) No es una función , la declare arriba como constante como usted lo hizo. const $linkEventos=document.querySelectorAll(".eventos-flujo a"); No entiendo que pasa y si me sacas de la duda estaré muy agradecido.

[@danielfabiani4468]

Hola MundoMagupe, estoy sefuro que ya solucionaste tu problema, pero trato de ir mirando los errores de los demás para aprender mejor. Cuando declaraste la constante usaste querySelectorAll donde va querySelector. Un abrazo y espero que nos reencontremos al final del curso.

[@dantepadilla1297]

@@danielfabiani4468 Hola bro ... sabes que me pasa lo mismo y probe con querySelectorAll y nada??? igual gracias

[@matiasgomez9416]

// 75. DOM: stopPropagation & preventDefault const $divsEventos = document.querySelectorAll(".eventos-flujo div"), $linkEventos = document.querySelector(".eventos-flujo a") // traeme el primer enlace function flujoEventos(e) { console.log(`Hola te saluda ${this.className}, el click lo originó ${e.target.className}`); e.stopPropagation(); // evitar la propagación } console.log($divsEventos); $divsEventos.forEach((div) => { // Fase de burbuja // div.addEventListener("click", flujoEventos); div.addEventListener("click", flujoEventos, false); // Fase de captura (Modelo inverso) // div.addEventListener("click", flujoEventos, true); // Eventos con objetos // div.addEventListener("click", flujoEventos, { // capture: true, // once: true, //evento se ejecuta una sola vez // }); }); $linkEventos.addEventListener("click", (e) => { alert("Hola soy tu amigo y docente digital... Jonathan MirCha"); e.preventDefault(); // cancelar la acción que tenga por default e.stopPropagation(); });

[@nychu4]

Hola gracia spor el video , yo lo que necesito es que se envie el formulario y no se recrge la pag .

[@jonmircha]

Eso lo vemos en la parte de los ejercicios

[@nychu4]

@@jonmirchahola , si me pudieras indicar el video te lo agradecería mucho , no lo encuentro..

[@eduardomegoguevara3181]

Escucho de fondo por el minuto 7 a 8 unas músicas de banda jajaja, tienes vecinos mariachis 😳

[@jonmircha]

😅no

[@elweonweandolaweafome]

3:25 el desfile xdddd

[@jonmircha]

😅

[@michae301]

jaja jon , en ese momento habia un desfile cerca de tu casa? XD

[@jonmircha]

😅

[@alannm5414]

tu sitio web dice : 68,300 suscriptores y ahora tenes 80,000 jajaaj

[@jonmircha]

No me ha dado tiempo de actualizarlo 🙈