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
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.
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 🧙♂️🧙♂️🧙♂️
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!
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'
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
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.
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.
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
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???
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. 🙋♂️
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
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
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()
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.
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
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
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.
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.
// 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(); });
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
Comparte para llegar a más personas ;)
Es que somos arios Wey. En Argenzuela es comer o ser comido.
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.
@@levialviter2302 pasa el link de la papa
UA-cam SOLO PROMUEVE LA ESTUPIDEZ
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.
😅
vamos muy bien, a medida que se va aprendiendo va aumentando la ansiedad para poder aplicar todo en un proyecto. Gracias Jon
😉👋🏻
Cada vez mejor este curso
😉👋🏻
yo usaba el e.preventDefault() y ni sabia que este era originario del evento en si, este curso es genial!
🧙♂Muchas graias, muy buen curso!!!
Gracias por comentar
Un tema que hay que entender muy bien. Gracias me quedo bastante claro.
👋🏻😉
sept 11 1969**Nov 16 2023
gracias excelente curso
felicidades John Mircha
Gracias, saludos👋🏻😉
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
🧙♂️🧙♂️🧙♂️
😉🙌🏻🦇
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!
🤓🙌
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'
😉👍🏻
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
Eres el mejor profesor!
🥰🙌🏻
Cada día me gusta más. Muchas gracias Sr. Mircha
👋🏻😉
Se entendió perfecto, gracias Jon!
Excelente!
Uno de los mas preferidos cursos. Estoy aprediendo mucho. Muchas gracias Jon!
Excelente!
ESTE CURSO ES UNA JOYA!!!!!!!! MEJOR QUE OTROS DE PAGA
😉👌🏻
excelente clase maestro 😁😁😁😁
Hola, muchas gracias
Excelente el curso! En un momento pense que los musicos iban a entrar a tu dormitorio
😅
Jon mircha es el julio profe de js ❤️
que buena clase profe muchas gracias
Con mucho gusto
Gracias Sensei!
👋🏻😉
Master! Muchas gracias por todo el material!!!
A la orden
Estas clases ayudan muchísimo ✅ quiero llegar a los ejercicios 😊
Con mucho gusto👋🏻😉
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.
👋🏻😉
Excelente, al fin llegue al 75 y voy caminando como un crack, gracias por las enseñanzas Jon querido, Muchas Bendiciones!
Felicidades!🥰🙌🏻
gracias excelente video
😉👍🏻
Master class! gracias jon :)
😉👋🏻
el preventDefault lo usaba siempre en mis formularios con Jquery, fundamental en AJAX
👌
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.
;)
Muy buen contenido, Jon. Claro y al grano. Gracias de nuevo!
Gracias!
Hasta ahora entiendo el e.preventDefault, muchas gracias, maestro... :)
😉✌🏻
Impecable como siempre Jon, muchas gracias por compartir tanto conocimiento. Dios te bendiga.
Gracias por tus bendiciones !!!
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?
tendrías que ejecutar manualmente con JS la redirección con location.href
stopPropagation() buen método
😉
amo esta lista, hace timepo lo vipara aprender javascript y ahora 1 años despues vengo a aprender o repasar temas XD
👋🏻😉
Me has quitado la duda de el preventDefault() gracias.
De nada :)
Gracias!
👋🏻😉
Muchas gracias Jonathan, es muy interesante todo lo que nos enseñas :)
Excelente video tio jon eres un crack!!!
Gracias!
muy buenos los videos! se aprende bastante bien
Muchas gracias!
crackk!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
🙈
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
Pues el window, finalmente es padre de todo, incluyendo el document, inténtalo y nos cuentas
calma amigo ,el siguiente video habla de la delegación de eventos vamos despacio
Buenas!, comentario constructivo , un antipop te ayudaria mucho en el sonido.
😉👍🏻
yyyyyyyyy..........gracias.......hasta mañana.
Igualmente!
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???
Son dos flujos diferentes, si tienes 2 hermanos cada uno tiene su propia propagación :)
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. 🙋♂️
Primero termina este
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
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
Buena observación, tienes alguna respuesta a ese comportamiento ?. Si es así, por favor compártelo.
@@gabrielcastillo1454 pasen su codigo pls, para verlo y encontrar el posible error
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()
Hola profe, quisiera saber en js de que sirve esa propagacion?porque existe si afecta al rendimiento y al programador no le conviene usarlo?
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.
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
ejecuta el metodo submit del form y listo
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
Ve el video de mañana, el número 76, ahí te enseñaré a lidiar con ese problema :)
@@jonmircha Espero con expectación.
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.
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.
@@danielfabiani4468 Hola bro ... sabes que me pasa lo mismo y probe con querySelectorAll y nada??? igual gracias
// 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();
});
3:25 el desfile xdddd
😅
Escucho de fondo por el minuto 7 a 8 unas músicas de banda jajaja, tienes vecinos mariachis 😳
😅no
Hola gracia spor el video , yo lo que necesito es que se envie el formulario y no se recrge la pag .
Eso lo vemos en la parte de los ejercicios
@@jonmirchahola , si me pudieras indicar el video te lo agradecería mucho , no lo encuentro..
jaja jon , en ese momento habia un desfile cerca de tu casa? XD
😅
tu sitio web dice : 68,300 suscriptores y ahora tenes 80,000 jajaaj
No me ha dado tiempo de actualizarlo 🙈