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.
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.
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..
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.
// 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 }); });
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 🫢
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.
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.
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
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) })
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
Bastante útil esta clase. Me gusto mucho.
Hola, muchas gracias
🧙♂Muchas gracias por el curso!!!
👋🏻😉
Muchas gracias. Se pone cada vez mas interesante y atractivo.
👋🏻😉
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
👋🏻😉
He visto cada uno de los vídeos y sigo igual de motivado, gracia por tus clases Jon.
Gracias a ti
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.
Sos demasiado crack Jon, a cada video que veo lo confirmo más
👋🏻😉
Seguimos firmes profeeeeeeeee
😉👋🏻
Gracias Jon!!!
Con gusto👋🏻😉
sept 11 1969**Nov 16 2023
gracias excelente curso
felicidades John Mircha
👋🏻😉
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.
👋🏻😉
Cada video es una motivación para ver el siguiente. Mil gracias 🙏🏾
🙌
Sos un crack Jon! Tu curso es el mas completo que hay, sin dudas. Muchisimas gracias, de corazon :D!
🤓🙌🏻
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.
😉
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😂😂😂
Master! Tremendo crack!! Con este enorme aporte
😉👍🏻
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!
excelente video gracias
Gracias por comentar
Muy buena clase, Jon!, como siempre. Gracias
Con mucho gusto
Jonathan, muy bien explicado, me gusta como nos enfocas los temas para hacer-los mas entendedores, muchas Gracias!!!
:)
lo entendí a la perfección gracias profe
Excelente!
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.
Excelente clase gracias profesor.
Con mucho gusto
Interesante tema, Gracias Jon!
A la orden
esta clase me voló ca cabeza, otra forma de ver los eventos
🤯🤭
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
Tu curso me está sirviendo de mucha ayuda, cada vez hago mejor las prácticas:) Saludos desde España maestro:)
😉👌🏻
Gracias!
👋🏻😉
Excelente Clase.
Hola, muchas gracias
// 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
});
});
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 🫢
cósmico!!!
mindblowing
😅
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.
👍🏻
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.
😉🙌🏻
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
😂
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
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
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
Checkpoint xD 🧐🍷
Tienes pensado hacer un curso de Electron?
No, desconozco Electrón y dudo usarla en un futuro inmediato
@@jonmircha Ok, gracias x responder 😀
Hay polimorfismo en JS??
Si
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
👏🏻👏🏻👏🏻
1310
¿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.
😉👍🏻
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)
})