😮 CÓMO manejar EVENTOS en Javascript 🤔 Event Listeners 😄 DOM

[@mariuetes]

Lo que daría por tener profesores como tú en el instituto donde estoy cursando el superior de DAW... Por si no tenía poco con la incompetencia, es semipresencial Literalmente, si me saco el título, será gracias a personas como vosotros. (aiuda, tengo amsieda) Estoy con el tema de DOM. Veré mañana la lista de reproducción que tienes en relación a este tema. Me ha servido mucho este video! Nueva sub! De nuevo, gracias.💖

[@alejandrosiguenzabernabeu2572]

Estoy en las mismas jajajaja... En algunas asignaturas ni me dan clases, a base de leer PDF's 🤬🤬

[@arielvaretto]

Excelente video, explicas lo que la mayoría no hace, vas al detalle y el porqué de usar unas cosas en lugar de otras. Muchas gracias y tienes un nuevo suscriptor!

[@quinojuan2]

Espero que sigan creciendo día a día. Están haciendo un buen trabajo!

[@DesarrolloUtil]

Muchísimas gracias!

[@Fritz7320]

Tus vídeos son oro puro, gracias por compartir tus conocimientos 🙂

[@jeissonm.5082]

Gracias José Miguel, feliz día

[@omernava3369]

Hermano excelente contenido, me ayudaste a solucionar un problema que me frustró justamente hoy. Te seguiré día a día para seguir mí proceso de aprendizaje 💪

[@DesarrolloUtil]

Genial, esos problemas son los peores 😂, muchas gracias por el feedback

[@arielcampos2008]

El video está muy bien hecho, gracias por compartir, aprendí un montón! Saludos desde Brasil

[@DesarrolloUtil]

Gracias y saludos para Brasil!

[@PalestinianCode]

Espectacular como nos tenéis acostumbrados. Gracias.

[@DesarrolloUtil]

Muchas gracias, como siempre!

[@marlonm]

Muy clara la explicación. Gracias por tan buen material.

[@pedromapo8910]

De lo mejor que he visto. Muy buen explicado. Gracias por vuestro esfuerzo en la creación de estos vídeos. Sólo os pediría que aumentaseis un poco el tamaño de la fuente del código. Suelo ver los vídeos en el móvil y me cuesta un poco seguirlos.

[@DesarrolloUtil]

Muchas gracias Pedro! El tema del zoom es algo bastante complicado y es algo que hemos hablado muchas veces en los directos. Si le damos más zoom, los usuarios de escritorio (la mayoría en nuestro caso) se quejan porque es demasiado grande, y para nosotros es complicado explicar algo cuando tratamos temas ya más complejos. Tener que hacer scroll continuamente porque no entra el código en la pantalla es muy difícil. Al final hemos tenido que buscar un equilibrio y hemos optado por este nivel que más o menos es correcto para todos, espero que lo entiendas!

[@sebastianrc1976]

Un lujaso de video, como siempre Jose. En lo poco que hice, siempre definía la función dentro el eventListener, pero ya me has convencido de definirla fuera... Gracias por tanta info!!!

[@DesarrolloUtil]

Me alegro de haberte convencido 😄

[@capoeira347]

Me gustó mucho el video, el contenido y la forma de presentarlo, se me pierden algunas palabras, sobre todo al final de la oración ☺

[@MX7681]

justo lo que buscaba!!!!!Gracias

[@agus.bellini]

sos crack, muy bien explicado. te deseo todos los exitos con tu canal

[@DesarrolloUtil]

Muchas gracias!

[@dieguitto3528]

Jose, alegra esa cara! Seguro que te ha quedado un vídeo genial as always 😉

[@DesarrolloUtil]

Espera a ver la del siguiente 😂, la de cosas que tenemos que hacer...

[@bitmau77]

Un genio! muchas gracias por los tips y la gran forma de explicar que tienes!

[@DesarrolloUtil]

Muchas gracias por tu feedback 😀😀

[@mariadc3917]

suscrita!! buen video, ni idea de como hacer eso, realmente es muy práctico

[@polankyoso]

agradecido con el de arriba por encontrar este canal.

[@levp7522]

Tomando en cuenta el minuto 8:15 ... PREGUNTA ¿Cómo tendría que escribir la función clickTitulo() si le quiero poner tres parámetros? Me refiero a esto; clickTitulo(param1, param2, param3). Una vez puse una función con tres parámetros dentro de la función AddEventListener, pero no funcionaba. Hice algo como esto: function clickTitulo(param1, param2, param3) { //Código aquí. } //Código aquí elemento.addEventListener("click", clickTitulo);

[@DesarrolloUtil]

Puedes ponerlo como addEventListener('click', ( ) => clickTitulo(param1, param2, param3));

[@hamiltonpatinosolano8557]

Brother muy bueno el video, excelente explicación y los concejos de buenas prácticas son lo mejor, ya me suscribí, pero si me gustaría que tuvieras una lista para todos los videos que tienen que ver con JavaScript, ya que estuve viendo y no la hay por lo que buscar videos de solo JavaScript se complica cuando los vez junto con todos los demás. Es solo una sugerencia.

[@DesarrolloUtil]

Muchas gracias, actualmente lo tenemos dividido en 3 listas que te dejo aquí por orden. Decidimos dividirlo así por dificultad y temas. JS desde cero: kzbin.info/aero/PL3aEngjGbYhnxiyLvZD3sy1sjdiNJETW8 JS y el DOM: kzbin.info/aero/PL3aEngjGbYhk0-aiiSMo3XKEpF2MeomVq JS Avanzado: kzbin.info/aero/PL3aEngjGbYhm0oduvsufVr4E0hAZdFZU9

[@williansang.4946]

suscriptor 10500, !!! Hermano eres un crack, saludos desde Peru !!

[@DesarrolloUtil]

Calculadísimo 😱😂 Muchas gracias Willian

[@marianaconti8855]

Muy clara tu explicación, gracias! Mi duda es, si quiero trabajar con módulos en javascript, ¿es posible exportar un evento? o cómo debería hacerlo? 🤔

[@joaquinpettinari200]

Buen video! Geniosss!

[@andreehernandez8682]

Excelente video, muchas gracias.

[@victorvidal7344]

Tremendo 🔥, gracias por la explicación, recién voy aprendiendo y el video me ayudo mucho 👌

[@DesarrolloUtil]

Me alegro un montón!

[@Marcelo_Flowers]

muchas gracias por su aporte

[@stephensampedro573]

como puedes personalizar el alert que se muestra al momento de cerrar la pestana o cerrar el navegador?

[@ozzy1987mr]

una consulta, donde puedo ver los eventos que puede escuchar addeventlistener... estaba haciendo un bot para una web que cuando nota un cambio en un div avisa pero no pude con esto.. tuve que investigar mutation

[@rogeclash2631]

iba a ver la mitad hoy y la otra mañana, (escribo el codigo) pero ha sido imposible, esto engancha mas que breaking bad , muchas gracias , ahora he entendido destructuring 100 , es buenisimo el video , muchas gracias

[@DesarrolloUtil]

Gracias a tí por tu apoyo 😉, y lo que está por venir jaja

[@Henry_Nunez]

Excelente video y muy buena explicación. Gracias 👍

[@DAVIDPC1976]

Buenas noches. Os he conocido hace muy poco, pero estoy viendo todos vuestros vídeos porque me parecen estupendos y muy fáciles de seguir. ENHORABUENA Y MUCHAS GRACIAS. Una duda... Hay alguna forma que funcione de evitar que se cierre una pestaña del navegador? He visto vídeos sobre el tema, pero no consigo que me funcione bien... Gracias de antemano. Un saludo

[@DesarrolloUtil]

Buenas, en primer lugar muchas gracias por tu feedback, nos anima mucho a seguir con ello 😉. Respecto a tu pregunta no hay ninguna forma de evitar el cierre de una pestaña, hay formas de obstaculizar como añadir alertas cuando el ratón sale de la pestaña, confirmación de cierre y cosas similares que supongo que es lo que habrás visto en otros videos. Ahora como consejo personal te digo que no es buena idea molestar al usuario de esa forma, es mejor que se quede por lo que ofreces a que se quede porque le es incómodo cerrar la pestaña.

[@DAVIDPC1976]

@@DesarrolloUtil Muchas gracias!!! Lo que comentas es lo he visto en varios vídeos, y tienes razón... mejor hacer algo de calidad que haga que el usuario se quiera quedar. Muchas gracias de nuevo. Un saludo

[@robertorobol5004]

excelente explicacion, super claro!

[@DesarrolloUtil]

Gracias!

[@martamoran3155]

Esto es genial!!! muchas gracias

[@DesarrolloUtil]

Muchas gracias a ti!

[@ProgramarDesdeCero]

Excelente video

[@DesarrolloUtil]

Gracias!

[@mariobarrios4376]

Me genera este error al hacerlo: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at action.js:521:5 ¿Qué podría ser?

[@DesarrolloUtil]

El objeto sobre el que intentas hacer un .addEventListener es null!

[@julianuribe8495]

Excelente info. Gracias.

[@PalestinianCode]

No olviden dejar un comentario y un like y por supuesto suscribirse.

[@DesarrolloUtil]

Ya te he dejado el like, pero lo de suscribirme a mí mismo se me complica 🤣

[@PalestinianCode]

@@DesarrolloUtil 🤣🤣 🤣

[@swetLive]

ha chinga ya te sigo entendio todo muy bien

[@mar_ac5758]

Muy buena explicación

[@DesarrolloUtil]

Gracias!

[@elsoldadodetaisontv]

muy buen video. Like

[@DesarrolloUtil]

Muchas gracias!

[@hellg1307]

Sois realmente buenos

[@DesarrolloUtil]

Muchas gracias!

[@desarrollowebshopify4102]

Muy bueno sigue asi

[@Fabri_edits]

Hola tengo una pregunta, estoy aprendiendo esto de los eventos y me da un error en la consola que es este: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') este es mi codigo en javascript : function ejemplo() { console.log("texto de ejemplo") } let h1 = document.querySelector("h1") h1.addEventListener("click", ejemplo ) Me podrias ayudar por favor

[@Fabri_edits]

no se si es del editor de codigo por que le he probado asi en diferentes partes y en algunos si me anduvo, necesito que me expliques esto

[@DesarrolloUtil]

Eso es porque QuerySelector devuelve un array, no un nodo. Deberías acostumbrarte a hacer un console.log, que ayuda bastante!

[@Fabri_edits]

@@DesarrolloUtil Tambien lo he probado con getElementById y me aparece lo mismo

[@josemanuelariashernandez6604]

Me parece excelente voy a intentar solucionar un bug de un formulario que aveces si enviaba el formulario y aveces recargaba la pagina de forma random y creo que me falto declarar el preventdefault espero y si me funcione 👌

[@hntrvzqz]

gracias muchas gracias

[@camiloriveramonroy2725]

en el momento de intentar unirse al grupo sale este mensaje " you can´t join to this group because it is full"

[@EloyMartinGimenez]

Estoy iniciando con Eventos y esta vista general me viene muy bien! gracias crack! var sub = 14500 xD

[@cerm88]

Hola excelente vídeo! Una duda, si tengo una página web extensa con muchos files html, cómo hago para cargar ciertas funciones en js especificamente al caragrse un html en específico. Por ejemplo tenngo un sitio web y al entrar al html de artículos entonces allí se llama a una función que llame un json para cargar el artículo y mostrarlo en pantalla?

[@DesarrolloUtil]

En ese caso, puedes tener un archivo JS distinto para cada HTML. Es la forma más sencilla, aunque deberías darle una vuelta a cómo y por qué hacerlo!

[@cerm88]

@@DesarrolloUtil Sí, creo que es la forma más sencilla, un file js por cada html que necesite registrar eventos o algunas funciones. Realmente esas funciones dependen de un nodo en específico de ese html, por ejmplo cargar una serie de items para visualizarse en el forntend. Lo que he hecho es verificar si ese nodo existe y cargar los eventos y funciones con if(node){...} pero podría traerme problemas de redundancia si dado caso llamo a un id igual que otro nodo en otro html, creo que es mejor hacerlo con files js aparte! Gracias!

[@DesarrolloUtil]

Correcto!

[@arian-coro]

Que bien lo explicas, me ha quedado claro como el agua, podrías decirme en que momentos es mejor utilizar una arrow function o es mejor utilizar una función normal

[@DesarrolloUtil]

De manera muy resumida sino tienes que utilizar this dentro de la función puedes usar arrow functions en cualquier caso, no obstante tenemos una explicación más detallada en el curso de JS por si quieres echarle un vistazo 😄

[@arian-coro]

@@DesarrolloUtil le echaré un vistazo gracias!

[@arielzarate3643]

no me funciona el segundo evento que haces en el titulo , tengo el id en el html, hago lo mismo en el archivo js , es como si no ejecutara la funcion

[@DesarrolloUtil]

Probablemente te falte algo pero, si no lo encuentras, puedes comentárnoslo en el canal de Discord. Tienes el enlace en la descripción!

[@arielzarate3643]

@@DesarrolloUtil soy un gil tío ya lo solucione , era que script del.archivo js se ejecutaba antes que el html dado que lo tengo en head , le puse la extensión defer y solución

[@DesarrolloUtil]

Gajes del oficio 😂

[@swetLive]

ha kbron aqui pude entenderlo bien gracias voy aa practicar estoy viendo quie necesito para realizar paginas web y desarrollarlas con codigo uwu

[@upgradelevi7325]

Hermano, tu canal es oro puro. Hablas de diferentes temas que son interesantes para el aprendizaje del desarrollo. Nuevo suscriptor. Una pregunta, ¿Es recomendable el usar la delegación de eventos?

[@DesarrolloUtil]

Muchísimas gracias! La respuesta a tu pregunta, como casi todo, es un "depende". En líneas generales, la delegación de eventos es muy interesante, pero depende mucho de cómo quieras manejarlos y, en casos sencillos, tal vez no merezca la pena. Es algo largo de explicar, por lo que te invito a que te pases por nuestro canal de Twitch cualquier día y nos repitas la pregunta por allí, para que podamos responderla compartiendo pantalla, y hablar largo y tendido sobre el tema!

[@yannvictorpoirotsanz3316]

GENIO

[@DesarrolloUtil]

Gracias!

[@maxigarrett3121]

Buen video

[@DesarrolloUtil]

Gracias Maxi

[@2kceltics]

Hola gracias por la explicacion, por casualidad no sabes si existe alguna herramienta que permite codificar el codigo javascript de nuestros archivos, asi los usuarios al apretar F12 dejan de ver lo que estamos programando, gracias desde ya!

[@DesarrolloUtil]

Muy buenas, el código Javascript lo puedes ofuscar, y lo puedes hacer "complejo de leer", pero nunca podrás ocultarlo del todo. Si lo que te preocupa es la seguridad, realmente nunca deberías escribir nada crítico dentro de este JS que envías al cliente. Todas esas operaciones clave, se hacen en el backend!

[@flan_02]

@@DesarrolloUtil muchísimas gracias, no conoce algún framework o herramienta para ofuscar lo más posible el código javascript ?

[@javiicastillo771]

crack

[@LeandroSchachner]

Hola genio! Como puedo poner el mismo evento a varios botones con el mismo ID? Si es que se puede

[@DesarrolloUtil]

No deberías tener dos elementos con el mismo ID en ningún caso, plantéate utilizar una clase o algo similar

[@hntrvzqz]

👍

[@Display_Block]

Hola muchas gracias por tu video de verdad, alguien de la comunidad sabrá como hacer un addEventListener pero en una Clase de javascript ? estoy buscando como hacerlo pero consigo como, gracias

[@thelowlevelcode6790]

No entiendo por qué es una mala práctica lo del onclick en el html. Si angular lo usa así, si react mezcla js y html... Osea si existe una función que hace un alert y tenemos 10 elementos que queremos que al hacer clic este muestre el alert. Se me hace mucho más fácil desde el onclick del html llamar a la función y no poder a la escucha del click a los elementos osea

[@DesarrolloUtil]

Es una cuestión demasiado larga para responder en un comentario de KZbin pero, por tratar de clarificar, que React permita escribirlo con esa sintaxis, no significa que por detrás no esté haciendo addEventListener (que de hecho, es lo que hace). Si te apetece, pasa por alguno de nuestros directos y lo comentamos por allí!

[@thelowlevelcode6790]

@@DesarrolloUtil gracias por responder ❤

[@LeTsBlAkKkK]

gracias wismichu

[@DesarrolloUtil]

Para eso estamos 😉