Es curioso ver como de 200.000 personas que entraron al curso desde el primer video, ahora solo hay menos de 10 mil continuando el curso, por continuar con este curso a pesar de eso y mas, muchas gracias. me haz ayudado bastante. mucho mas que la universidad
Para el vídeo anterior en vez de crear una variable para añadirla al removeEventListener, en el addEventListener si añades once:true, sólo se ejecuta una vez const $eventoRemover = document.getElementById("evento-remover"); $eventoRemover.addEventListener("dblclick", (e)=>{ alert(`Removiendo el evento tipo ${e.type}`); console.log(event); $eventoRemover.disabled =true; },{once:true}) Me ha encantado este vídeo Sr. Mircha. Muchas gracisa por compartir su sabiduría y explicarla de forma fácil y sencilla.
Estoy haciendo cada curso que tiene que ver con desarrollo frontend y todos con Jonmircha, encontrar a Jon ha sido el mejor regalo ya que lo encontré el día de mi cumpleaños y desde ese día empecé con html y css, luego hice, flex box CSS, Grid CSS, figma, terminal, git y GitHub, markdown… ahora estoy en JavaScript. Les recomiendo que practiquen mucho. No es solo mirar videos o aprender más lenguajes, sino que también debes de ponerte a crear proyectos. En figma hay muchos recurso que pueden descargar y recrearlos con código y hasta darles sus propios estilos.
No se si les sirva a otras personas que estén siguiendo el curso pero me ha ayudado muchisimo ver cada video del curso en velocidad de 1.25 o 1.50, como que las frases las capto mejor al escucharla de una forma mas completa y rápida, ya cuando no lo comprendo bien porque quizás en el vídeo hable rápido bajo la velocidad a normal, pero en la mayoría de explicaciones, cuando Jon intenta reunir desde su experiencia los conceptos e ideas hay como una pausa entre oraciones o palabras y esto ayuda muchísimo a que se entienda rápido y sencillo, ya no devuelvo tanto el vídeo porque comprendo mas rápido..
Muchas gracias. Excelente manejo del idioma español, de Javascript, del curso y de Kenai. Estoy recién aprendiendo hace un unos meses. El mejor profesor, creo.
Excelento curso, esta fue una clase maestra, al igual que muchos desconocia lo de la fase de captura, y sobre todo lo la propiedad 'once' siento que me será muy útil. Gracias profe por regalarnos este gran curso.
No hace falta que las 3 divs tengan asignado el mismo evento. Si el evento está solo en la div1, igual se va a disparar al hacer click en la div2 o la div3, ya que están dentro de div1. Solo que en ese caso el "this" siempre sería la div1 y solo cambiaría el event.target.
jajajaja Saga es una nenita como Shaka, el más poderoso es Kanon, sólo te recuerdo quien se madreo a medio Inframundo y quien no pudo con un muro de cemento 🫢
Me gusta muchísimo como explicas muchas gracias seria genial que nos dijeras que framework aprender de react js, Vue Js, Angular Js,Svelte o si con cualquiera que elijamos podemos hacer lo mismo . muchas gracias bro.
No soy de poner muchos likes ni nada así por el estilo, me concentro tanto en la información que la mayoría de las veces ni siquiera me acuerdo que hay que dar like, es más, la mayoría de los videos que he visto no les he dado like. Por eso y a modo de agradecimiento voy a tratar de darle like a todos los videos que me faltan y a los que no le he dado le daré cuando termine el curso. Sé que es opcional, pero, en la vida hay que ser agradecidos, así que a darle like o compartir o ambas. Saludos.
Lo del this me explotó la cabeza xD. Creo que sería buena idea en el html poner siempre el nombre de la clase como className para evitar confusiones como cuando accedemos al valor de la clase desde el this ya que yo habría puesto class xD. className es una propiedad de los elementos al igual que classList mientras que class es el nombre de la clase que le pusimos al elemento, pero no podemos llamar a este elemento usando .class; por eso creo que es mejor poner siempre como nombre de clase className y evitar confusiones. Se puede acceder al valor de la clase tanto con className como con classList, la diferencia de estos radica en que classList tiene métodos para añadir o quitar clases sin afectar a las que ya hubieran.
Profesor Jon muchas gracias, me quedó muy claro el concepto. Jon, en qué casos has usado esta característica? Me gustaría saber para tener una idea de como usarla, Muchas gracias por sus clases.
Una pregunta. ¿cómo le puedo hacer para que mi vscode me muestre toda esa información al escribir. Por ejemplo, cuando al escribir el addEventListener muestra "addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void" "appends an event listener for events whose..."
Hola! cuando en el tercer parámetro del addEventListener en el objeto declaramos 'once : true', esto es el equivalente de hacer el 'removeEventListener' para liberar memoria?
Para el vídeo anterior en vez de crear una variable para añadirla al removeEventListener, en el addEventListener si añades once:true, sólo se ejecuta una vez const $eventoRemover = document.getElementById("evento-remover"); $eventoRemover.addEventListener("dblclick", (e)=>{ alert(`Removiendo el evento tipo ${e.type}`); console.log(event); $eventoRemover.disabled =true; },{once:true})
Una consulta. ¿Se puede pasar parámetros con una función expresada en un addEventListener? En el video se aprecia ejemplos con funciones flecha y el paso de parámetros. Pero no sobre esto. Saludos.
Buenas noches a todos espero que se encuentren super bien, Jon tengo una duda, para acceder al valor de un input, a un valor no al elemento en si estoy usando esto, let variable = document.getElementById('name').value; pero el .value me marca error porque dice que no existe, cual otra forma existe para poder acceder al valor de un input ???? Gracias de antemano
@@jonmircha Si es el correcto, el valor me lo reconoce, me toma el valor del input, pero en la terminal me manda el error ese en el .value, no se que será
Como puedo hacer para que dar click en el div tres solo me de un mensaje diciendo console.log(`Hola te saluda ${this.className} el click lo origino ${e.target.className}`); y no tenga que recorrer los tres divs??? yo solo quiero que me diga uno que es en el que di click
// 74. DOM: Flujo de Eventos (Burbuja y Captura) // developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener // Flujo del evento: una vez que el elementos se origina tiene una propagación a lo largo del árbol del DOM. Por defecto esa propagación se va dando desde el más interno hacia el elemento más externo. Esta fase se llama "fase de burbuja" const $divsEventos = document.querySelectorAll(".eventos-flujo div"); function flujoEventos(e) { console.log(`Hola te saluda ${this.className}, el click lo originó ${e.target.className}`); } 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 }); });
Este video lo tuve que ver 2 veces porque no me quedo tan claro jajaj Aca comparto mis apuntes de esta clase: //* 👉 Principalmente hay 2 manera que nosotros podemos trabajar en como se va propagando el evento, a eso se refiere cuando hablamos del flujo del evento. //* 👉 Una vez que el evento se origina tiene una propagacion a lo largo del arbol del DOM. Por defecto esa propagacion se va dando desde el elemento mas interno hacia el elemento mas externo, que en este caso es el document, y esa fase se llama 💧FASE DE BURBUJA. //? 🤔 Por que se le llama FASE DE BURBUJA? piensen en una burbuja, analizenlo. Desde el evento mas interno se propaga, y piensen en esa burbuja que se va extendiendo hasta el elemento padre mas superior, que en este caso es window. Por defecto ese es el esquema y el modelo que los navegadores soportan const $divsEventos = document.querySelectorAll(".eventos-flujo div") //* 💬 Imaginense que en una interfaz dinamica una botonera se forma a partir de un catalogo que tengamos en la base de datos, entonces tenemos que ir a 🔎 consultar la base de datos, tenemos que imprimir un boton por cada registro que venga de la base de datos y a ese boton asignarle dinamicamente un evento. Entonces para eso tendriamos que asignarle dinamicamente el evento a todos los elementos function flujoEventos(e) { console.log(`Hola te saluda ${this.className}, el click lo origino ${e.target.className}`) } console.log($divsEventos)//👈Devuelve un nodeList con las tres divs que se encuentran en esa seccion $divsEventos.forEach((div) => { //* 3⃣ El tercer parametro principalmente recibe un boolean, si le ponemos false significa que estamos en fase de burbuja, el flujo de los eventos se propaga del mas interno al mas externo dentrod el arbol del DOM //* 💱 Si quisiera el modelo contrario que es la ✊FASE DE CAPTURA, asi se le llama porque estamos capturando esa burburja de los eventos, entonces va desde el elemento mas externo al elemento mas interno //💧 FASE DE BURBUJA //div.addEventListener("click", flujoEventos, false) //✊ FASE DE CAPTURA //div.addEventListener("click", flujoEventos, true) //Al tercer parametro tambien podemos pasarle un objeto div.addEventListener("click", flujoEventos, { //capture: false //capture: true, once: true//👈Significa que la funcion solamente se va a ejecutar una vez }) }) //* 🔻🔻 Cuando le doy click a '3' internamente la div tres esta dentro de la dos y de la uno, y como los tres elementos tienen asignado ese evento click, justamente ahi vemos la propagacion del evento. Por eso tenemos un console.log de tres veces
¿A alguien mas le ha ocurrido que ${this.className} resulte en "undefined"? 🙄 Es mas, haciendo el console.log(this) respectivo resulta que this es window. 🤔
En mi caso primero lo hice la funcion con una expresada, y no leia el this.className, pero luego de que lo hiciera con una declara si lo leia, pero no imprimia los 3 divs, no aplica la burbuja mi codigo; de hecho este es: const $divsEventos = document.querySelectorAll(".evento-flujo") function funcionEvento(z){ console.log(`Hola soy ${this.className} y el click lo hizo el div ${z.target.className}`) } $divsEventos.forEach((div) => { div.addEventListener("click", funcionEvento) })
Excelente curso, muy agradecido con usted profeso Jon Mircha
👋🏻😉
Es curioso ver como de 200.000 personas que entraron al curso desde el primer video, ahora solo hay menos de 10 mil continuando el curso, por continuar con este curso a pesar de eso y mas, muchas gracias. me haz ayudado bastante. mucho mas que la universidad
😉👍🏻
x2
x3
Código HTML:
Flujo de eventos
1
2
3
CSS:
.eventos-flujo div{
padding: 4rem;
font-size: 2rem;
text-align: center;
}
.uno{
background-color: yellow;
}
.dos{
background-color: gold;
}
.tres{
background-color: lightyellow;
}
erue
He visto cada uno de los vídeos y sigo igual de motivado, gracia por tus clases Jon.
Gracias a ti
Sin duda alguna este es una joya de cursó.
:) comparte para llegar a más gente
Comenta y dale like, ayuda al mejor de los profes yessssssssss
👋🏻😉
Para el vídeo anterior en vez de crear una variable para añadirla al removeEventListener, en el addEventListener si añades once:true, sólo se ejecuta una vez
const $eventoRemover = document.getElementById("evento-remover");
$eventoRemover.addEventListener("dblclick", (e)=>{
alert(`Removiendo el evento tipo ${e.type}`);
console.log(event);
$eventoRemover.disabled =true;
},{once:true})
Me ha encantado este vídeo Sr. Mircha. Muchas gracisa por compartir su sabiduría y explicarla de forma fácil y sencilla.
Muchas gracias. Se pone cada vez mas interesante y atractivo.
👋🏻😉
Bastante útil esta clase. Me gusto mucho.
Hola, muchas gracias
Sos demasiado crack Jon, a cada video que veo lo confirmo más
👋🏻😉
Recien descubrí este curso y tiene muy buena pinta! Sigué con el. Muchas gracias por compartir con nosotros ese conocimiento.
De nada, comparte para llegar a más gente :)
Estoy haciendo cada curso que tiene que ver con desarrollo frontend y todos con Jonmircha, encontrar a Jon ha sido el mejor regalo ya que lo encontré el día de mi cumpleaños y desde ese día empecé con html y css, luego hice, flex box CSS, Grid CSS, figma, terminal, git y GitHub, markdown… ahora estoy en JavaScript.
Les recomiendo que practiquen mucho.
No es solo mirar videos o aprender más lenguajes, sino que también debes de ponerte a crear proyectos. En figma hay muchos recurso que pueden descargar y recrearlos con código y hasta darles sus propios estilos.
👋🏻😉
Uff por fin llegúe a partes de eventos, y esto de flujo de eventos está interesante, poco falta para llegar al BOM
Así es!
No se si les sirva a otras personas que estén siguiendo el curso pero me ha ayudado muchisimo ver cada video del curso en velocidad de 1.25 o 1.50, como que las frases las capto mejor al escucharla de una forma mas completa y rápida, ya cuando no lo comprendo bien porque quizás en el vídeo hable rápido bajo la velocidad a normal, pero en la mayoría de explicaciones, cuando Jon intenta reunir desde su experiencia los conceptos e ideas hay como una pausa entre oraciones o palabras y esto ayuda muchísimo a que se entienda rápido y sencillo, ya no devuelvo tanto el vídeo porque comprendo mas rápido..
XD yo me escucho a x2 :P
@@jonmircha 🤣🤣🤣
@@jonmircha😂😂😂
Cada video es una motivación para ver el siguiente. Mil gracias 🙏🏾
🙌
Seguimos firmes profeeeeeeeee
😉👋🏻
Muchas gracias. Excelente manejo del idioma español, de Javascript, del curso y de Kenai. Estoy recién aprendiendo hace un unos meses. El mejor profesor, creo.
😉
Jonathan, muy bien explicado, me gusta como nos enfocas los temas para hacer-los mas entendedores, muchas Gracias!!!
:)
Sos un crack Jon! Tu curso es el mas completo que hay, sin dudas. Muchisimas gracias, de corazon :D!
🤓🙌🏻
Gracias Jon!!!
Con gusto👋🏻😉
🧙♂Muchas gracias por el curso!!!
👋🏻😉
Excelento curso, esta fue una clase maestra, al igual que muchos desconocia lo de la fase de captura, y sobre todo lo la propiedad 'once' siento que me será muy útil. Gracias profe por regalarnos este gran curso.
De nada :)
No hace falta que las 3 divs tengan asignado el mismo evento. Si el evento está solo en la div1, igual se va a disparar al hacer click en la div2 o la div3, ya que están dentro de div1. Solo que en ese caso el "this" siempre sería la div1 y solo cambiaría el event.target.
Master! Tremendo crack!! Con este enorme aporte
😉👍🏻
Muy buena clase, Jon!, como siempre. Gracias
Con mucho gusto
lo entendí a la perfección gracias profe
Excelente!
Excelente clase gracias profesor.
Con mucho gusto
jon como puedes ser tan sabio, ya es la segunda ves que veo el curso y a las justas voy entendiendo, como quisiera dominar react y nextjs como tu 😭
Paciencia, Disciplina y Practica
excelente video gracias
Gracias por comentar
sept 11 1969**Nov 16 2023
gracias excelente curso
felicidades John Mircha
👋🏻😉
Interesante tema, Gracias Jon!
A la orden
esta clase me voló ca cabeza, otra forma de ver los eventos
🤯🤭
Tu curso me está sirviendo de mucha ayuda, cada vez hago mejor las prácticas:) Saludos desde España maestro:)
😉👌🏻
Excelente Clase.
Hola, muchas gracias
Te amo Mircha y te sigo en instagram tu unico defecto creo es creer que saga es mas fuerte que shaka gracias por tanto , tienes un gran corazon .
jajajaja Saga es una nenita como Shaka, el más poderoso es Kanon, sólo te recuerdo quien se madreo a medio Inframundo y quien no pudo con un muro de cemento 🫢
Gracias!
👋🏻😉
Me gusta muchísimo como explicas muchas gracias seria genial que nos dijeras que framework aprender de react js, Vue Js, Angular Js,Svelte o si con cualquiera que elijamos podemos hacer lo mismo . muchas gracias bro.
En mis vlogs y lives hablo al respecto
No soy de poner muchos likes ni nada así por el estilo, me concentro tanto en la información que la mayoría de las veces ni siquiera me acuerdo que hay que dar like, es más, la mayoría de los videos que he visto no les he dado like. Por eso y a modo de agradecimiento voy a tratar de darle like a todos los videos que me faltan y a los que no le he dado le daré cuando termine el curso.
Sé que es opcional, pero, en la vida hay que ser agradecidos, así que a darle like o compartir o ambas.
Saludos.
😉🙌🏻
Lo del this me explotó la cabeza xD. Creo que sería buena idea en el html poner siempre el nombre de la clase como className para evitar confusiones como cuando accedemos al valor de la clase desde el this ya que yo habría puesto class xD. className es una propiedad de los elementos al igual que classList mientras que class es el nombre de la clase que le pusimos al elemento, pero no podemos llamar a este elemento usando .class; por eso creo que es mejor poner siempre como nombre de clase className y evitar confusiones.
Se puede acceder al valor de la clase tanto con className como con classList, la diferencia de estos radica en que classList tiene métodos para añadir o quitar clases sin afectar a las que ya hubieran.
👍🏻
Profesor Jon muchas gracias, me quedó muy claro el concepto.
Jon, en qué casos has usado esta característica?
Me gustaría saber para tener una idea de como usarla,
Muchas gracias por sus clases.
Ciertos eventos como los de change de inputs te piden activar el tru en el listener para funcionar
@@jonmircha entiendo profe, muchas gracias :D
mindblowing
😅
Una pregunta. ¿cómo le puedo hacer para que mi vscode me muestre toda esa información al escribir. Por ejemplo, cuando al escribir el addEventListener muestra "addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void" "appends an event listener for events whose..."
jonmircha.com/vscode
cósmico!!!
con este curso creo que mi color favorito se volvera el amarillo xd
psdt: estuvo potente el hola del Jon en 7:01 que se activaron las mayusculas
😂
Hola! cuando en el tercer parámetro del addEventListener en el objeto declaramos 'once : true', esto es el equivalente de hacer el 'removeEventListener' para liberar memoria?
Para el vídeo anterior en vez de crear una variable para añadirla al removeEventListener, en el addEventListener si añades once:true, sólo se ejecuta una vez
const $eventoRemover = document.getElementById("evento-remover");
$eventoRemover.addEventListener("dblclick", (e)=>{
alert(`Removiendo el evento tipo ${e.type}`);
console.log(event);
$eventoRemover.disabled =true;
},{once:true})
Una consulta. ¿Se puede pasar parámetros con una función expresada en un addEventListener? En el video se aprecia ejemplos con funciones flecha y el paso de parámetros. Pero no sobre esto. Saludos.
También, simplemente ejecuta la función con parámetros dentro del listener
Buenas noches a todos espero que se encuentren super bien, Jon tengo una duda, para acceder al valor de un input, a un valor no al elemento en si estoy usando esto, let variable = document.getElementById('name').value; pero el .value me marca error porque dice que no existe, cual otra forma existe para poder acceder al valor de un input ???? Gracias de antemano
Revisa que el nombre del id sea el correcto
@@jonmircha Si es el correcto, el valor me lo reconoce, me toma el valor del input, pero en la terminal me manda el error ese en el .value, no se que será
Como puedo hacer para que dar click en el div tres solo me de un mensaje diciendo console.log(`Hola te saluda ${this.className} el click lo origino ${e.target.className}`); y no tenga que recorrer los tres divs??? yo solo quiero que me diga uno que es en el que di click
Mira el siguiente video 🤓
@@jonmircha jaja oka
// 74. DOM: Flujo de Eventos (Burbuja y Captura)
// developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener
// Flujo del evento: una vez que el elementos se origina tiene una propagación a lo largo del árbol del DOM. Por defecto esa propagación se va dando desde el más interno hacia el elemento más externo. Esta fase se llama "fase de burbuja"
const $divsEventos = document.querySelectorAll(".eventos-flujo div");
function flujoEventos(e) {
console.log(`Hola te saluda ${this.className}, el click lo originó ${e.target.className}`);
}
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
});
});
🧙♂️🧙♂️🧙♂️
👍🏻
Checkpoint xD 🧐🍷
Hay polimorfismo en JS??
Si
Tienes pensado hacer un curso de Electron?
No, desconozco Electrón y dudo usarla en un futuro inmediato
@@jonmircha Ok, gracias x responder 😀
Este video lo tuve que ver 2 veces porque no me quedo tan claro jajaj
Aca comparto mis apuntes de esta clase:
//* 👉 Principalmente hay 2 manera que nosotros podemos trabajar en como se va propagando el evento, a eso se refiere cuando hablamos del flujo del evento.
//* 👉 Una vez que el evento se origina tiene una propagacion a lo largo del arbol del DOM. Por defecto esa propagacion se va dando desde el elemento mas interno hacia el elemento mas externo, que en este caso es el document, y esa fase se llama 💧FASE DE BURBUJA.
//? 🤔 Por que se le llama FASE DE BURBUJA? piensen en una burbuja, analizenlo. Desde el evento mas interno se propaga, y piensen en esa burbuja que se va extendiendo hasta el elemento padre mas superior, que en este caso es window. Por defecto ese es el esquema y el modelo que los navegadores soportan
const $divsEventos = document.querySelectorAll(".eventos-flujo div")
//* 💬 Imaginense que en una interfaz dinamica una botonera se forma a partir de un catalogo que tengamos en la base de datos, entonces tenemos que ir a 🔎 consultar la base de datos, tenemos que imprimir un boton por cada registro que venga de la base de datos y a ese boton asignarle dinamicamente un evento. Entonces para eso tendriamos que asignarle dinamicamente el evento a todos los elementos
function flujoEventos(e) {
console.log(`Hola te saluda ${this.className}, el click lo origino ${e.target.className}`)
}
console.log($divsEventos)//👈Devuelve un nodeList con las tres divs que se encuentran en esa seccion
$divsEventos.forEach((div) => {
//* 3⃣ El tercer parametro principalmente recibe un boolean, si le ponemos false significa que estamos en fase de burbuja, el flujo de los eventos se propaga del mas interno al mas externo dentrod el arbol del DOM
//* 💱 Si quisiera el modelo contrario que es la ✊FASE DE CAPTURA, asi se le llama porque estamos capturando esa burburja de los eventos, entonces va desde el elemento mas externo al elemento mas interno
//💧 FASE DE BURBUJA
//div.addEventListener("click", flujoEventos, false)
//✊ FASE DE CAPTURA
//div.addEventListener("click", flujoEventos, true)
//Al tercer parametro tambien podemos pasarle un objeto
div.addEventListener("click", flujoEventos, {
//capture: false
//capture: true,
once: true//👈Significa que la funcion solamente se va a ejecutar una vez
})
})
//* 🔻🔻 Cuando le doy click a '3' internamente la div tres esta dentro de la dos y de la uno, y como los tres elementos tienen asignado ese evento click, justamente ahi vemos la propagacion del evento. Por eso tenemos un console.log de tres veces
👏🏻👏🏻👏🏻
¿A alguien mas le ha ocurrido que ${this.className} resulte en "undefined"? 🙄
Es mas, haciendo el console.log(this) respectivo resulta que this es window. 🤔
🙃 ya encontrè el error, la función del manejador de eventos debe ser nombrada, inicialmente la habia puesto como anonima.
😉👍🏻
1310
En mi caso primero lo hice la funcion con una expresada, y no leia el this.className, pero luego de que lo hiciera con una declara si lo leia, pero no imprimia los 3 divs, no aplica la burbuja mi codigo; de hecho este es:
const $divsEventos = document.querySelectorAll(".evento-flujo")
function funcionEvento(z){
console.log(`Hola soy ${this.className} y el click lo hizo el div ${z.target.className}`)
}
$divsEventos.forEach((div) => {
div.addEventListener("click", funcionEvento)
})