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

[@luisfrontendvue2001]

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!

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

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

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

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

[@lopuma1990]

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

[@chicocrazy220691]

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

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

[@osmanmazariegos4586]

Excelente recomendación, y muy claro te felicito.

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

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

[@lucianoschmidt2398]

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

[@davidticstorm4114]

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

[@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!

[@juliopaez9989]

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

[@marcosgonzalezmarin8157]

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

[@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!

[@pablowbk]

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

[@agussdk4194]

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

[@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!

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

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

[@edwinloaiza1017]

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

[@lanb08]

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

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

[@arturrojas9209]

Excelente! muy profesional, gracias por el aporte 💯

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

[@borisxd6614]

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

[@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 😂

[@arromero491]

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

[@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 🤠

[@rancorsz]

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

[@taoistagames6077]

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

[@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!

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

[@ODaro-mc7nm]

Como siempre un placer ver tus videos!!

[@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!

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

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

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

[@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!

[@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:

[@rigomorficooficial3827]

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

[@markuswater]

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

[@gerdebur]

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

[@xReDCrIsTx]

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

[@igor.miranda]

woow maestro de maestros.!! GRACIAS TOTALES.

[@joserodrigolopezfuentes5607]

Excelente. Me ayudo muchisimo :3 .

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

[@heribertovelascomora8747]

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

[@joaquinbustelo7889]

Me encanta la forma en la que explicas

[@gabriellejq27]

Genial. Gracias por compartir.

[@rubenvalencia283]

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

[@LenRM]

Cómo siempre alucinante 😘💛💛💛 #elmejor

[@pabloantoniojuarezsalas]

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

[@SeiFukai]

Muchas gracias Falcon, excelente video como siempre.

[@FalconMasters]

Muchas gracias!

[@CYBERKRANE]

Muy buen tip, muy útil, Gracias Falcon.

[@mariaeugeniacabanas841]

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

[@ezequielmartinezlopez8768]

Gracias por el video, aprendi algo nuevo e interesante.

[@darkl3iaX]

Muy genial todo wow!

[@delcarmat]

gracias es muy util yo tambien usaba un for antes

[@hamiltonsilesmercado5373]

Gracias, justo lo que necesito.

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

[@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?

[@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'

[@joanjoan8845]

Excelente! muchisimas gracias !

[@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?

[@ramonsaavedra7904]

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

[@minotamashiroM]

Excelente video muchas gracias Falcón

[@davidhilera2877]

Excelente aporte.

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

[@mpinovaz4014]

Muy buen tip, gracias.

[@FateeOG]

Buen video, sigue subiendo mas videos de JS

[@rikromero1]

Que copado! Gracias!!

[@jesusgabrielgarciamarquez704]

Excelente video 👍🏻

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

[@digitalstablerds2498]

Muy buen video

[@jkf16m96]

Buen video, no sabia esto!!

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

[@andresescobar2582]

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

[@2005bgva]

Excelente, muy bueno.

[@Luisito_Silva]

Excelente, muchas gracias.

[@jaimeviloriogreen]

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.

[@newentu]

Excelente tutorial!!

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

[@Chaloquim]

Buenísima la información!

[@zvzartedigital1003]

Gracias!!!!

[@jhon.bianchi]

Muy buen tutorial brother

[@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?

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

[@misterl8129]

buenisimo video, gracias

[@dgalicia]

No lo sabía. Genial

[@franzmiguelsalinas]

Gracias maestro!!

[@fabiojaramillo6765]

Excelente video.

[@armandoruiz9349]

Muy bueno. gracias

[@terryadityaildefonsochagua3710]

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

[@darkl3iaX]

WOW!!! no sabia eso del propagation O_O.