CONSEJO: Estas usando mal los Event Listeners en Javascript !!!

[@luisfrontendvue01]

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!

[@elliotowasp4077]

Más videos de estos. Excelente ejemplo para optimizar!

[@francisconunez1832]

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.

[@christopherdallar1508]

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

[@FalconMasters]

Muchas gracias Christopher!

[@MiguelGarcia-zy1sh]

Eres excelente, he aprendido más contigo que con cualquier profesor, gracias por todo

[@FalconMasters]

Muchas gracias!

[@juliopaez9989]

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.

[@Hiroki_MakeGames]

Wow excelente! Muchas gracias por el vid. Me vino bárbaro como novato busco mejorar mi código , así que gracias !

[@FalconMasters]

Me da gusto que te sirviera

[@yoniervasquezmarin2319]

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!.

[@maximojuniorapazachirhuana9641]

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

[@juancarlosruiz7012]

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 😀

[@FalconMasters]

Muchas gracias!

[@edwynamador]

Faltó que mencionaras sobre removeEventListener (para los principiantes), que en ocasiones sí es un requisito, para no tener comportamientos inesperados o problemas de performance.

[@undefined5339]

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!

[@eljons1137]

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

[@osmanmazariegos4586]

Excelente recomendación, y muy claro te felicito.

[@chicocrazy220691]

Había olvidado la propagación de eventos, gracias por recordarme lo. Eres genial

[@lucianoschmidt2398]

Hermano me solucionaste la vida. No hubiera adivinado que podes asignar el evento al elemento padre ni por casualidad. Sos un genioooo

[@madrigalmartinezkevinfranc1761]

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.

[@lopuma1990]

Pedazo de vídeo muy bien explicado, tienes más así ???, Ayudan mucho

[@marcosgonzalezmarin8157]

gracias carlos arturo por compartir tu conocimiento, sin duda tus videos me han servidos ya desde hace un par de años

[@taoistagames6077]

hola gracias por el video, duda: event listeners o function onclick en el botón, y el motivo. saludos muchas gracias.

[@bitmau77]

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

[@pritep]

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 :)

[@FalconMasters]

Me alegra mucho que te haya servido!

[@davidticstorm4114]

Excelente video... Que buena manera mencionas para realizar la delegación de los eventos ... Son de gran ayuda. Saludos

[@agussdk4194]

Amigazo que buen video, en mi vida se me hubiera ocurrido, alta data, muchas gracias.

[@juliopaez9989]

Genial tu video: totalmente funcional y útil para usarlo en mis paginas web. Gracias totales

[@satoshi093]

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 🤠

[@edwinloaiza1017]

Carlos excelente video y metodo super facil como siempre gran aporte. muchas gracias

[@alchemy_coder]

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...

[@pablowbk]

Buen consejo, sobre todo para los que stamos iniciando en la programación

[@WalterPagani]

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.

[@ftwtf]

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 😂

[@arturrojas9209]

Excelente! muy profesional, gracias por el aporte 💯

[@MiguelGomez-lk7tn]

NO se si aun leas comentarios pero tus videos son lo mejor que he visto,gracias bro

[@FalconMasters]

Aún intento leer todos los comentarios. Muchas gracias por tu comentario!

[@arromero491]

Sigue con el buen trabajo, hermano, entendí todo por tu buena explicación.

[@securecodingdevelopment5023]

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!

[@gabrieltenorio3517]

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!

[@GM-lh8be]

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

[@williamvasquez3600]

Excelente explicación Falcon como siempre, continúa haciendo lo que haces, se te da muy bien. Me ayudaste muchísimo. Saludos

[@FalconMasters]

Muchas gracias!

[@borisxd6614]

Excelente Falcón, es un enorme placer ver tus videos...

[@kazza5545]

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:

[@lanb08]

Que buen video, excelente demostración de como hacer una programación mas limpia. Muchas gracias por compartir tus conocimientos

[@joaquinbustelo7889]

Me encanta la forma en la que explicas

[@Tylorix]

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

[@joserodrigolopezfuentes5607]

Excelente. Me ayudo muchisimo :3 .

[@TheCarloz2009]

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

[@rancorsz]

Excelente, forma de optimizar y bastante práctico el ejemplo, muchas gracias

[@jcruz30]

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)

[@FalconMasters]

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.

[@Cloweling]

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.

[@gerdebur]

Un video muy explicativo... gracias... se aprende mucho

[@rodriguezfregosojosueleona6743]

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'

[@erikmartinez8169]

Épale Carlos gracias por este video tu canal parece la caja de Pandora lleno de contenidos poderosos, gracias por la información

[@FalconMasters]

Gracias Erik!

[@erikmartinez8169]

@@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]

@@erikmartinez8169 Eso es genial! Muchas gracias por hacérmelo saber, y me gustaría preguntarte, ¿como te sientes con lo que has aprendido?

[@erikmartinez8169]

@@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 😁

[@gabriellejq27]

Genial. Gracias por compartir.

[@ODaro-mc7nm]

Como siempre un placer ver tus videos!!

[@ezequielmartinezlopez8768]

Gracias por el video, aprendi algo nuevo e interesante.

[@rigomorficooficial3827]

Justo en un proyecto hice un menú de presupuestos me abría venido genial tu consejo jajaja

[@heribertovelascomora8747]

Genial muchas gracias, es muy útil esta forma de programar en javascript

[@joanjoan8845]

Excelente! muchisimas gracias !

[@xReDCrIsTx]

Muy bueno, no lo sabia y hacía la primera opción

[@rubenvalencia283]

Gracias por el vídeo querido Falcon, he estado haciendo las cosas mal!

[@hamiltonsilesmercado5373]

Gracias, justo lo que necesito.

[@LenRM]

Cómo siempre alucinante 😘💛💛💛 #elmejor

[@markuswater]

Muchas gracias por compartir este consejo, desde ahora lo empezaré a aplicar!!

[@SeiFukai]

Muchas gracias Falcon, excelente video como siempre.

[@FalconMasters]

Muchas gracias!

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

[@igor.miranda]

woow maestro de maestros.!! GRACIAS TOTALES.

[@ramrmarquez]

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 .... ??

[@CYBERKRANE]

Muy buen tip, muy útil, Gracias Falcon.

[@oscarbattaglia9130]

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?

[@delcarmat]

gracias es muy util yo tambien usaba un for antes

[@basiliocabreja1268]

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?

[@mpinovaz4014]

Muy buen tip, gracias.

[@mariaeugeniacabanas841]

Hola Carlos, genial, Gracias!! como siempre excelente video. Saludos

[@pabloantoniojuarezsalas]

Muchas gracias voy a incorporar este conocimiento en mi código.

[@giovannivoltaproxy]

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

[@henrycontal]

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.

[@giovannivoltaproxy]

@@henrycontal gracias por aclarar amigo todo : )

[@Luisito_Silva]

Excelente, muchas gracias.

[@darkl3iaX]

Muy genial todo wow!

[@rikromero1]

Que copado! Gracias!!

[@2005bgva]

Excelente, muy bueno.

[@ramonsaavedra7904]

Hola.. Y como se haria lo de el evento que no targetee al div si el padre es div y los hijos tambien?

[@davidhilera2877]

Excelente aporte.

[@JValenteM92]

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...)!

[@chepevic]

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();

[@victorzuniga8894]

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! :)

[@Lacruzama]

Excelente video muchas gracias Falcón

[@edustreamimg]

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.

[@oscardelacruz1557]

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

[@mrhuevo9265]

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.

[@juliettecetina1494]

Muchas gracias, explicación clara y concisa! Ahora a aplicarla 😊

[@FalconMasters]

Gracias!

[@misterl8129]

buenisimo video, gracias

[@armandoruiz9349]

Muy bueno. gracias

[@AlejandroMartinez-zw9if]

Excelente explicación cómo siempre 😁👌

[@FalconMasters]

Gracias!

[@franzmiguelsalinas]

Gracias maestro!!

[@luisdiaz8189]

Mira yo compre tu curso haces unos años y se me borranron los estilos como puedo hacer para recuperarlo

[@martinsantos718]

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?

[@21linkinpark]

¿Cómo se aplica estos conceptos en proyectos React? Gracias por el video!

[@jkf16m96]

Buen video, no sabia esto!!

[@jesusgabrielgarciamarquez704]

Excelente video 👍🏻

[@jhon.bianchi]

Muy buen tutorial brother

[@andresescobar2582]

¿La delegación de eventos la podría aplicar al document ? y hacer condicionales para e.target.matches o en su caso tagName ?

[@ernestomotta5178]

Me surgió una duda, en qué condiciones un evento de click no tendría Target? Gracias por el video, es súper bueno

[@rondamon4408]

¿¿¿Si haces un preventDefault esto bloquearía el evento de la etiqueta "a"???

[@wagjimcol]

Excelente, gracias.

[@FateeOG]

Buen video, sigue subiendo mas videos de JS

[@manueldorantes9446]

Que buen video Bro! 👋 Gracias

[@FalconMasters]

Muchas gracias!