Tambien empece con los foreach dando listeners a cada elemente, pero despues aprendi la delegacion de eventos y es una manera elegante y optima de colocar eventos a los items que se van creando dinamicamente, buen video!
Te doy las gracias @FalconMasters. Antes de este ver este video cuando agregaba un "click" EventListener este se ejecutaba al cargarse la página pero NUNCA cuando presionaba el elemento. Ahora es distinto y el programa hace lo que se supone cuando se presiona dicho elemento y no cuando la pagina ha cargado. Y no solo eso sino que también puedo usar los EventListener de manera no necesariamente global para que funcione.
Son brutales tus videos de tips, nunca dejes de hacerlos, eres diferentes a los demás youtubers gracias a eso, Porque tu nos ayudas con tu experiencia y nos provees de exactamente maneras de mejorar y no solo con un curso y ya, sino mejorar lo que ya aprendimos
Muy bueno el video, excelente el tema de la propagación del evento. Una observación, probé armando una lista con 2 campos, Ejemplo campo1>campo2. Comprobé que funciona mal si se hace click adentro de los div internos, el click tiene que hacerse en el div de la fila.
Muy buen vídeo, la manera de manejar los eventos es muy excelente y me gustó la ventaja de que se detectan los clics en los nuevos nodos hijos agregados. Gracias por mostrarnos este método!.
Faltó que mencionaras sobre removeEventListener (para los principiantes), que en ocasiones sí es un requisito, para no tener comportamientos inesperados o problemas de performance.
Excelente, no había escuchado si quiera de la delegación de eventos. De hecho me viene perfecto para optimizar un viejo script que se basa en esperar el evento load de imágenes, sabía que poner event listeners a la larga en grandes cantidades iba a ser problema. No tenía la más remota idea de que hacer en ese caso.
Excelente como siempre! ..y por favor, no se pierda, trate de subir videos de este estilo, cortos y directos a un asunto en especifico, son geniales! Saludos...
Pensé que lo estaba haciendo mal y que había una manera más optimizada de hacerlo, pero me doy cuenta de que aprendí bien y de la manera correcta:') muchas gracias!
Excelente vídeo, no se me había ocurrido la segunda opción, lo que pense que ibas a hacer es que al crear un elemento de lista, crear con el un event listener. Pero siempre sorprendiendo :)
Que cool. Yo también admito hago el primer caso y estaba empezando a preocupar el tema de tener tantos eventos pero con esto se me solocionaran esos temas 🤠
Excelente gracias! hice un menu dinámico de esta forma donde le aplique que entregase un valor data-xxx para diferenciar, pero ahora lo dejare un poco mas limpio, y para las tablas donde remapeaba el listener hare lo mismo , saludos!
De momento no lo voy a usar (creo). Pero siempre esta interesante cosas nuevas cosas que permitan mejorar las habilidades. Nunca hay que dejar de estudiar y aprender. Casi se me olvida. Gracias por el vídeo.
15:06 ahi tengo una duda cuando usas tagname como es que se reconoce la A como etiqueta aunque no sea en minuscula ya que entiendo que esta comparando si se esta seleccionando la etiqueta ,entonces no importa si 'A' lo mone como mayuscula ? es decir si seria lo mismo que poner e.target.tagName==='a'
Excelente video, aunque esta un poco dificil cuando hay muchos elementos, por ejemplo en una tabla con tr > td > a(para editar) & a(para eliminar) ademas que cada uno tiene un icono en vez de letras por lo que cada vez que hago click me sale el elemento del icono y no del a (me sale o bien svg o path)
Si, este es un ejemplo sencillo, pero se puede aplicar a tablas. Le pones el listener al table y aun así todos los elementos dentro sin importar que tan profundos estén tendrán el listener. Es cosa de hacer un buen condicional.
Lo que puedes hacer, siempre agregando el evento a la tabla, agregar un attribute con inicial "data-" en el tag que quieres capturar, Ejemplo: data-row="delete" y con la condicional capturas al elemento cuando tenga ese atributo. Bueno aunque hay varias formas pero esa es la forma como se me ocurre.
la forma de optimizar el Event Listeners es mediante la delegación de eventos al colocarle el evento al document y depuse detectar quien es el que emite el evento con la función matches, asi solo tenemos un Event Listeners en la aplicación
@@FalconMasters todos los días aparte del curso de Javascript en udemy veo el contenido de tu canal, hermano ya me hice esa costumbre gracias por todo ese contenido
@@FalconMasters totalmente satisfecho hermano de verdad agradezco el esfuerzo que haces para compartir esos conocimientos geniales sobre desarrollo web, y si ya me he hecho el hábito de ver todos los vídeos del canal. Y voy por más cursos 😁
Cuando agregas 'A' al condicional, de donde es que esta saliendo? a que esta haciendo referencia ese 'A' ? si es a la etiqueta no entiendo porque en Mayúscula? si alguien que sepa me puede ayudar agradezco de antemano ;P
Muy buen ejemplo!! Desconocía la propagación de eventos. Recientemente programé una sala de cine con tablas e itere los ≤td≥ para ponerles el click, eran más de 100 elementos 😂
yo lo hago con un insertar elemento html y le pongo el listener, así no tengo un foreach cada que agregas un elemento, pero me gusta bastante este método, lo único es que hay que estar atento a que evento le estas dando y a que target, por el tema de que todos los que estén anidados mas el padre tienen el mismo listener por así decirlo
Hola, tengo varios archivos js en mi proyecto. Cuando se carga un archivo se ejecutan las funciones que corresponden a la vista que se muestra, los otros que tienen el EventListener emiten un error en la consola del navegador porque no se están llamado en la vista. ¿Cómo puedo optimizarlo?
sabes si se pueden apilar varios cllick event en un solo ul? es decir que le configuro un listener en una parte de mi codigo y despues en otro lado me interesa conservar el primero y apilar un segundo.
Gracias por el vídeo querido Falcon, he estado haciendo las cosas mal!
3 года назад+1
Existe otro problema: si haces click en el icono el tagName será "" en vez de "" y no se hará toggle de "activo". La solución es cambiar el if. La condición sería "el target es el elemento o es un elemento dentro del elemento
Saludos .... Creo que esto es lo que estoy necesitando .... Se puede recuperar el id del elemento en el que yo hago click de multiples elementos igualitos pero con diferente id .... ??
Hola, muchas gracias por tus video ya que son bien explicativos. Quisiera crear un bot para una pagina web donde debo seleccionar intervalos de horas en un dia completo dividido en intervalos de media hora por ejemplo de 12:00 am a 12:30am, 12:30am a 1:00 am y así sucesivamente. hasta llegar al intervalo de 11:30pm a 12:00m. Dentro de la página hay un botón donde hay que hacer clic para actualizar el programa dentro de la página para ver los intervalos que están disponibles en ese momento, pero esos intervalos son liberados por el sistema al azar, y no puedo estar todo el día sentado en una PC actualizando la página para tomar las horas que pueda liberar el sistema a una hora cualquiera. Así que me gustaría crear un bot donde pueda actualizar la página en ese botón cada X segundos que yo quiera y que lo haga continuamente y cuando aparezcan esos intervalos de horas disponibles, el bot de detenga de actualizar la página y tome esos intervalos que estén disponibles y pueda elegirlos todos al mismo tiempo. Quisiera saber que lenguaje de programación aprender para hacer un bot de este tipo, si Javascript, Python o cual?
Mi pregunta es si se PUEDE OBVIAR poner en el condicional: e.target porque se supone que cuando se hace CLICK, ya hay un OBJETIVO, ya hay un TARGET, eso de puede OMITIR???
Ojo que los elementos hijos no sean del mismo tipo de etiqueta del padre, es decir: . . . , ya que el tagName o nodeName es el mimo en el padre y en el hijo, y en caso de serlo, la verificación con el if debe ser más estricta usando, quizás, classList.contains(), por mencionar.
Muy buen contenido, la diferencia de usar arrow function vs function como segundo parametro es que con una function normal tienes que usar this para apuntar a tus var declaradas al principio y con la arrow function ya toma al objeto contexto en donde ejecutas, tengo esa duda que aprendí que con arrow function deja pasar al this de más arriba también comentan que no tiene this, gracias por el gran contenido
Las arrow function heredan el contexto del objeto global window, es por esa razón que si declaras una propiedad en window puedes acceder a ella mediante el this del contexto de una arrow function. Por otro lado, una function (la común) su contexto es la misma function, cabe resaltar que las funciones en JavaScript son también objetos.
Una pregunta y si dentro de un boton tendrias mas etiquetas por ejemplo icono Texto ¿cómo seria para que se ejecute el evento en todo ese contenedor del boton validandolo por clase ?
Que bueno, no sabía esa forma, gracias por existir... Pregunta: Hay una forma de obtener todos los campos de un formulario o id y enviarlos con POST usando fecth sin estar repitiendo formulario.append(data..., value...)!
const enviarForm=async()=>{ const formulario=document.querySelector('#formulario'); //guardar formulario en una variable const form=new FormData(formulario); //captura todos los campos del formulario const response=await fetch('url', { method:'POST', body: form }); const data=await response.json(); or response.text(); dependiendo lo que quieras obtener... console.log(data)//ver la respuesta } enviarForm();
Bueno para ser honesto soy muy principiante en javascript... Pero la primera forma no la conocía para nada!! Yo siempre he usado la segunda y me encanta saber que lo he estado haciendo bien! :)
Tambien empece con los foreach dando listeners a cada elemente, pero despues aprendi la delegacion de eventos y es una manera elegante y optima de colocar eventos a los items que se van creando dinamicamente, buen video!
Te doy las gracias @FalconMasters. Antes de este ver este video cuando agregaba un "click" EventListener este se ejecutaba al cargarse la página pero NUNCA cuando presionaba el elemento. Ahora es distinto y el programa hace lo que se supone cuando se presiona dicho elemento y no cuando la pagina ha cargado.
Y no solo eso sino que también puedo usar los EventListener de manera no necesariamente global para que funcione.
Más videos de estos. Excelente ejemplo para optimizar!
Son brutales tus videos de tips, nunca dejes de hacerlos, eres diferentes a los demás youtubers gracias a eso, Porque tu nos ayudas con tu experiencia y nos provees de exactamente maneras de mejorar y no solo con un curso y ya, sino mejorar lo que ya aprendimos
Muchas gracias Christopher!
Eres excelente, he aprendido más contigo que con cualquier profesor, gracias por todo
Muchas gracias!
Muy bueno el video, excelente el tema de la propagación del evento. Una observación, probé armando una lista con 2 campos, Ejemplo campo1>campo2. Comprobé que funciona mal si se hace click adentro de los div internos, el click tiene que hacerse en el div de la fila.
Muy buen vídeo, la manera de manejar los eventos es muy excelente y me gustó la ventaja de que se detectan los clics en los nuevos nodos hijos agregados. Gracias por mostrarnos este método!.
Wow excelente! Muchas gracias por el vid. Me vino bárbaro como novato busco mejorar mi código , así que gracias !
Me da gusto que te sirviera
Primer video que veo de tu canal. Muchas gracias por el contenido, explicas todo perfecto y vas al punto! Ya me he subscrito a tu canal 😀
Muchas gracias!
Había olvidado la propagación de eventos, gracias por recordarme lo. Eres genial
gracias carlos arturo por compartir tu conocimiento, sin duda tus videos me han servidos ya desde hace un par de años
Faltó que mencionaras sobre removeEventListener (para los principiantes), que en ocasiones sí es un requisito, para no tener comportamientos inesperados o problemas de performance.
Excelente, no había escuchado si quiera de la delegación de eventos. De hecho me viene perfecto para optimizar un viejo script que se basa en esperar el evento load de imágenes, sabía que poner event listeners a la larga en grandes cantidades iba a ser problema. No tenía la más remota idea de que hacer en ese caso.
Pedazo de vídeo muy bien explicado, tienes más así ???, Ayudan mucho
Genial tu video: totalmente funcional y útil para usarlo en mis paginas web. Gracias totales
Hermano me solucionaste la vida. No hubiera adivinado que podes asignar el evento al elemento padre ni por casualidad. Sos un genioooo
Excelente como siempre! ..y por favor, no se pierda, trate de subir videos de este estilo, cortos y directos a un asunto en especifico, son geniales! Saludos...
Pensé que lo estaba haciendo mal y que había una manera más optimizada de hacerlo, pero me doy cuenta de que aprendí bien y de la manera correcta:') muchas gracias!
Me pasó lo mismo xD
Sabía que lo estaba haciendo mal cuando ya llevaba varios listeners individuales dentro de un conjunto de elementos jajaja
Excelente video... Que buena manera mencionas para realizar la delegación de los eventos ... Son de gran ayuda. Saludos
Amigazo que buen video, en mi vida se me hubiera ocurrido, alta data, muchas gracias.
Excelente recomendación, y muy claro te felicito.
Buen consejo, sobre todo para los que stamos iniciando en la programación
cuando aprendi la delegacion de eventos en js me senti dios , jajaja porque yo antes si hacia lo que mostraste al inicio del video . Buen video
Excelente vídeo, no se me había ocurrido la segunda opción, lo que pense que ibas a hacer es que al crear un elemento de lista, crear con el un event listener. Pero siempre sorprendiendo :)
Me alegra mucho que te haya servido!
Excelente Falcón, es un enorme placer ver tus videos...
Que buen video, excelente demostración de como hacer una programación mas limpia. Muchas gracias por compartir tus conocimientos
Sigue con el buen trabajo, hermano, entendí todo por tu buena explicación.
Carlos excelente video y metodo super facil como siempre gran aporte.
muchas gracias
Que cool. Yo también admito hago el primer caso y estaba empezando a preocupar el tema de tener tantos eventos pero con esto se me solocionaran esos temas 🤠
hola gracias por el video, duda: event listeners o function onclick en el botón, y el motivo. saludos muchas gracias.
Excelente explicación Falcon como siempre, continúa haciendo lo que haces, se te da muy bien. Me ayudaste muchísimo. Saludos
Muchas gracias!
Excelente! muy profesional, gracias por el aporte 💯
Excelente gracias! hice un menu dinámico de esta forma donde le aplique que entregase un valor data-xxx para diferenciar, pero ahora lo dejare un poco mas limpio, y para las tablas donde remapeaba el listener hare lo mismo , saludos!
De momento no lo voy a usar (creo). Pero siempre esta interesante cosas nuevas cosas que permitan mejorar las habilidades. Nunca hay que dejar de estudiar y aprender.
Casi se me olvida. Gracias por el vídeo.
15:06 ahi tengo una duda cuando usas tagname como es que se reconoce la A como etiqueta aunque no sea en minuscula ya que entiendo que esta comparando si se esta seleccionando la etiqueta ,entonces no importa si 'A' lo mone como mayuscula ? es decir si seria lo mismo que poner e.target.tagName==='a'
Excelente video, aunque esta un poco dificil cuando hay muchos elementos, por ejemplo en una tabla con tr > td > a(para editar) & a(para eliminar) ademas que cada uno tiene un icono en vez de letras por lo que cada vez que hago click me sale el elemento del icono y no del a (me sale o bien svg o path)
Si, este es un ejemplo sencillo, pero se puede aplicar a tablas. Le pones el listener al table y aun así todos los elementos dentro sin importar que tan profundos estén tendrán el listener. Es cosa de hacer un buen condicional.
Lo que puedes hacer, siempre agregando el evento a la tabla, agregar un attribute con inicial "data-" en el tag que quieres capturar, Ejemplo: data-row="delete" y con la condicional capturas al elemento cuando tenga ese atributo. Bueno aunque hay varias formas pero esa es la forma como se me ocurre.
He llegado a usar la segunda manera pero no de manera conciente.
Ahora que entiendo cómo funciona, será más limpio mi código, ¡Gracias!
Excelente método! Por favor has más videos sobre optimización así como este, estoy haciendo mi primera app y no se nada de optimización! D:
Excelente, forma de optimizar y bastante práctico el ejemplo, muchas gracias
la forma de optimizar el Event Listeners es mediante la delegación de eventos al colocarle el evento al document y depuse detectar quien es el que emite el evento con la función matches, asi solo tenemos un Event Listeners en la aplicación
excelente explicación una observación so te falto explicar el e.stopPropagation() que se usa para detener la propagación de eventos a los hijos
Como siempre un placer ver tus videos!!
Épale Carlos gracias por este video tu canal parece la caja de Pandora lleno de contenidos poderosos, gracias por la información
Gracias Erik!
@@FalconMasters todos los días aparte del curso de Javascript en udemy veo el contenido de tu canal, hermano ya me hice esa costumbre gracias por todo ese contenido
@@erikmartinez8169 Eso es genial! Muchas gracias por hacérmelo saber, y me gustaría preguntarte, ¿como te sientes con lo que has aprendido?
@@FalconMasters totalmente satisfecho hermano de verdad agradezco el esfuerzo que haces para compartir esos conocimientos geniales sobre desarrollo web, y si ya me he hecho el hábito de ver todos los vídeos del canal. Y voy por más cursos 😁
Cuando agregas 'A' al condicional, de donde es que esta saliendo? a que esta haciendo referencia ese 'A' ? si es a la etiqueta no entiendo porque en Mayúscula? si alguien que sepa me puede ayudar agradezco de antemano ;P
NO se si aun leas comentarios pero tus videos son lo mejor que he visto,gracias bro
Aún intento leer todos los comentarios.
Muchas gracias por tu comentario!
Muy buen ejemplo!! Desconocía la propagación de eventos. Recientemente programé una sala de cine con tablas e itere los ≤td≥ para ponerles el click, eran más de 100 elementos 😂
yo lo hago con un insertar elemento html y le pongo el listener, así no tengo un foreach cada que agregas un elemento, pero me gusta bastante este método, lo único es que hay que estar atento a que evento le estas dando y a que target, por el tema de que todos los que estén anidados mas el padre tienen el mismo listener por así decirlo
Cómo siempre alucinante 😘💛💛💛 #elmejor
Hola.. Y como se haria lo de el evento que no targetee al div si el padre es div y los hijos tambien?
Muchas gracias por compartir este consejo, desde ahora lo empezaré a aplicar!!
Muy bueno, no lo sabia y hacía la primera opción
Un video muy explicativo... gracias... se aprende mucho
Hola, tengo varios archivos js en mi proyecto. Cuando se carga un archivo se ejecutan las funciones que corresponden a la vista que se muestra, los otros que tienen el EventListener emiten un error en la consola del navegador porque no se están llamado en la vista. ¿Cómo puedo optimizarlo?
Genial muchas gracias, es muy útil esta forma de programar en javascript
Muchas gracias muy clarito!
Perdón por la ignorancia, pero porque en el JS se pregunta por A mayúscula en el tagName si el tag es a minuscula en HTML?
sabes si se pueden apilar varios cllick event en un solo ul? es decir que le configuro un listener en una parte de mi codigo y despues en otro lado me interesa conservar el primero y apilar un segundo.
Justo en un proyecto hice un menú de presupuestos me abría venido genial tu consejo jajaja
Me encanta la forma en la que explicas
Gracias por el video, aprendi algo nuevo e interesante.
Excelente. Me ayudo muchisimo :3 .
Gracias por el vídeo querido Falcon, he estado haciendo las cosas mal!
Existe otro problema: si haces click en el icono el tagName será "" en vez de "" y no se hará toggle de "activo".
La solución es cambiar el if. La condición sería "el target es el elemento o es un elemento dentro del elemento
Hola Carlos, genial, Gracias!! como siempre excelente video. Saludos
Saludos ....
Creo que esto es lo que estoy necesitando ....
Se puede recuperar el id del elemento en el que yo hago click de multiples elementos igualitos pero con diferente id .... ??
Hola, muchas gracias por tus video ya que son bien explicativos. Quisiera crear un bot para una pagina web donde debo seleccionar intervalos de horas en un dia completo dividido en intervalos de media hora por ejemplo de 12:00 am a 12:30am, 12:30am a 1:00 am y así sucesivamente. hasta llegar al intervalo de 11:30pm a 12:00m.
Dentro de la página hay un botón donde hay que hacer clic para actualizar el programa dentro de la página para ver los intervalos que están disponibles en ese momento, pero esos intervalos son liberados por el sistema al azar, y no puedo estar todo el día sentado en una PC actualizando la página para tomar las horas que pueda liberar el sistema a una hora cualquiera. Así que me gustaría crear un bot donde pueda actualizar la página en ese botón cada X segundos que yo quiera y que lo haga continuamente y cuando aparezcan esos intervalos de horas disponibles, el bot de detenga de actualizar la página y tome esos intervalos que estén disponibles y pueda elegirlos todos al mismo tiempo.
Quisiera saber que lenguaje de programación aprender para hacer un bot de este tipo, si Javascript, Python o cual?
Muchas gracias Falcon, excelente video como siempre.
Muchas gracias!
¿La delegación de eventos la podría aplicar al document ? y hacer condicionales para e.target.matches o en su caso tagName ?
gracias es muy util yo tambien usaba un for antes
Mi pregunta es si se PUEDE OBVIAR poner en el condicional: e.target porque se supone que cuando se hace CLICK, ya hay un OBJETIVO, ya hay un TARGET, eso de puede OMITIR???
Mira yo compre tu curso haces unos años y se me borranron los estilos como puedo hacer para recuperarlo
Muchas gracias voy a incorporar este conocimiento en mi código.
Genial. Gracias por compartir.
Gracias, justo lo que necesito.
Muy buen tip, muy útil, Gracias Falcon.
¿¿¿Si haces un preventDefault esto bloquearía el evento de la etiqueta "a"???
woow maestro de maestros.!! GRACIAS TOTALES.
Ojo que los elementos hijos no sean del mismo tipo de etiqueta del padre, es decir: . . . , ya que el tagName o nodeName es el mimo en el padre y en el hijo, y en caso de serlo, la verificación con el if debe ser más estricta usando, quizás, classList.contains(), por mencionar.
Excelente video 👍🏻
Excelente! muchisimas gracias !
Muy buen contenido, la diferencia de usar arrow function vs function como segundo parametro es que con una function normal tienes que usar this para apuntar a tus var declaradas al principio y con la arrow function ya toma al objeto contexto en donde ejecutas, tengo esa duda que aprendí que con arrow function deja pasar al this de más arriba también comentan que no tiene this, gracias por el gran contenido
Las arrow function heredan el contexto del objeto global window, es por esa razón que si declaras una propiedad en window puedes acceder a ella mediante el this del contexto de una arrow function. Por otro lado, una function (la común) su contexto es la misma function, cabe resaltar que las funciones en JavaScript son también objetos.
@@henrycontal gracias por aclarar amigo todo : )
Muy buen video
Lo mismo para calculadora?
Que copado! Gracias!!
Excelente aporte.
Muchas gracias, explicación clara y concisa! Ahora a aplicarla 😊
Gracias!
Una pregunta y si dentro de un boton tendrias mas etiquetas por ejemplo
icono
Texto
¿cómo seria para que se ejecute el evento en todo ese contenedor del boton validandolo por clase ?
ya es de probar amigo
Muy genial todo wow!
Muy buen tip, gracias.
Excelente, muy bueno.
Excelente video muchas gracias Falcón
el codigo no me sale, se queda la nube saltando en la pantalla
Excelente tutorial!!
Buen video, no sabia esto!!
Que bueno, no sabía esa forma, gracias por existir...
Pregunta: Hay una forma de obtener todos los campos de un formulario o id y enviarlos con POST usando fecth sin estar repitiendo formulario.append(data..., value...)!
const enviarForm=async()=>{
const formulario=document.querySelector('#formulario'); //guardar formulario en una variable
const form=new FormData(formulario); //captura todos los campos del formulario
const response=await fetch('url',
{ method:'POST',
body: form
});
const data=await response.json(); or response.text(); dependiendo lo que quieras obtener...
console.log(data)//ver la respuesta
}
enviarForm();
Excelente explicación cómo siempre 😁👌
Gracias!
buenísimo como siempre
Muchas gracias!
Buen video, sigue subiendo mas videos de JS
Me surgió una duda, en qué condiciones un evento de click no tendría Target? Gracias por el video, es súper bueno
Muy buen tutorial brother
Bueno para ser honesto soy muy principiante en javascript... Pero la primera forma no la conocía para nada!! Yo siempre he usado la segunda y me encanta saber que lo he estado haciendo bien! :)