CONSEJO: Estas usando mal los Event Listeners en Javascript !!!
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- En este video quiero darles un tip a las personas que comienzan aprender javascript, para optimizar mas su código mediante delegación de eventos.
Mis cursos de desarrollo web:
⭐ Curso Completo de Diseño Web Profesional:
www.desarrollo...
⭐ Curso Completo de React y Firebase:
www.desarrollo...
⭐Curso Completo de Javascript
www.desarrollo...
⭐ Curso Completo de PHP y MYSQL:
www.desarrollo...
⭐ Curso de Bootstrap 5:
www.desarrollo...
⭐ Curso Completo de creación de tiendas online:
www.desarrollo...
---
📄 Código del Video: jsfiddle.net/r...
---
Redes Sociales:
📌 Twitter: / falconmasters
📌 Página de Facebook: / falconmasters
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!
Más videos de estos. Excelente ejemplo para optimizar!
Eres excelente, he aprendido más contigo que con cualquier profesor, gracias por todo
Muchas gracias!
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!
Faltó que mencionaras sobre removeEventListener (para los principiantes), que en ocasiones sí es un requisito, para no tener comportamientos inesperados o problemas de performance.
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!.
Excelente recomendación, y muy claro te felicito.
Pedazo de vídeo muy bien explicado, tienes más así ???, Ayudan mucho
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.
Excelente video... Que buena manera mencionas para realizar la delegación de los eventos ... Son de gran ayuda. Saludos
Había olvidado la propagación de eventos, gracias por recordarme lo. Eres genial
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
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...
Carlos excelente video y metodo super facil como siempre gran aporte.
muchas gracias
gracias carlos arturo por compartir tu conocimiento, sin duda tus videos me han servidos ya desde hace un par de años
Que buen video, excelente demostración de como hacer una programación mas limpia. Muchas gracias por compartir tus conocimientos
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
Buen consejo, sobre todo para los que stamos iniciando en la programación
Amigazo que buen video, en mi vida se me hubiera ocurrido, alta data, muchas gracias.
Excelente, forma de optimizar y bastante práctico el ejemplo, muchas gracias
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.
Genial tu video: totalmente funcional y útil para usarlo en mis paginas web. Gracias totales
Excelente explicación Falcon como siempre, continúa haciendo lo que haces, se te da muy bien. Me ayudaste muchísimo. Saludos
Muchas 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 ?
Excelente Falcón, es un enorme placer ver tus videos...
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!
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!
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!
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
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
Muy bueno, no lo sabia y hacía la primera opción
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
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
Un video muy explicativo... gracias... se aprende mucho
Muchas gracias por compartir este consejo, desde ahora lo empezaré a aplicar!!
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:
Sigue con el buen trabajo, hermano, entendí todo por tu buena explicación.
Genial. Gracias por compartir.
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!
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!
Gracias por el video, aprendi algo nuevo e interesante.
Hermano me solucionaste la vida. No hubiera adivinado que podes asignar el evento al elemento padre ni por casualidad. Sos un genioooo
hola gracias por el video, duda: event listeners o function onclick en el botón, y el motivo. saludos 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 🤠
É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 😁
gracias es muy util yo tambien usaba un for antes
Excelente. Me ayudo muchisimo :3 .
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.
Me encanta la forma en la que explicas
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 😂
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
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
Excelente! muy profesional, gracias por el aporte 💯
Muy buen tip, gracias.
Como siempre un placer ver tus videos!!
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.
Gracias, justo lo que necesito.
Me surgió una duda, en qué condiciones un evento de click no tendría Target? Gracias por el video, es súper bueno
Genial muchas gracias, es muy útil esta forma de programar en javascript
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! muchisimas gracias !
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?
Muchas gracias voy a incorporar este conocimiento en mi código.
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.
Justo en un proyecto hice un menú de presupuestos me abría venido genial tu consejo jajaja
Muchas gracias Falcon, excelente video como siempre.
Muchas gracias!
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'
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???
woow maestro de maestros.!! GRACIAS TOTALES.
Muy genial todo wow!
Muy buen tip, muy útil, Gracias Falcon.
Hola Carlos, estoy en estos días siguiendo tu curso de Udemy para la creación de paginas web. Tengo una pequeña duda, vale la pena aprender la parte de Jquerry?, veo muchos comentarios de que no vale la pena ya hoy en día aprenderlo y son muchos los comentarios que veo (Incluso videos, aquí en youtube). No se si es que ya ha sido desplazado o simplemente esta de moda otro, cualquiera sea el caso, me gustaría saber de parte tuya si vale la pena aun así seguir con esa parte del curso o si puedo en parte omitirla. Gracias de antemano
Pues te recomiendo aprenderlo, ejemplo pues estás en una empresa y te piden hacer un proyecto que lo habían hecho y tiene jquerry.
Puede ser que ya no esté tanto usó pero uno nunca sabe cuándo necesito algo en específico.
Gracias!!!!
Excelente aporte.
Que copado! Gracias!!
Muy bueno. gracias
Excelente, muy bueno.
Hola Carlos, genial, Gracias!! como siempre excelente video. Saludos
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?
Hola.. Y como se haria lo de el evento que no targetee al div si el padre es div y los hijos tambien?
Excelente video muchas gracias Falcón
Muy buen video
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 .... ??
Tenés que acercar la cámara más se ve bien pero todo muy pequeño
¿Cómo se aplica estos conceptos en proyectos React? Gracias por el video!
Gracias por el vídeo querido Falcon, he estado haciendo las cosas mal!
¿¿¿Si haces un preventDefault esto bloquearía el evento de la etiqueta "a"???
Excelente tutorial!!
Buen video, he estado haciendo las dos cosas, pero aveces me oriento más por la primera....
No lo sabía. Genial
buenisimo video, gracias
WOW!!! no sabia eso del propagation O_O.
Carlitos se usan mal por qué son para javbascript....jajaja🤣
Buen video, no sabia esto!!
Gracias maestro!!
Muchas gracias, explicación clara y concisa! Ahora a aplicarla 😊
Gracias!
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.
Buen video, sigue subiendo mas videos de JS
excelente explicacion
Cómo siempre alucinante 😘💛💛💛 #elmejor