Curso JavaScript: 72. DOM: Manejadores de Eventos -

En este video te explico los manejadores de eventos (#EventHandlers) que son la base para trabajar con eventos en el #DOM de #JavaScript.
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/...
📖 Mis notas sobre JSON jonmircha.com/...
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal kzbin.info... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
📫 Suscríbete a mi lista de correo tinyletter.com...

[@grovercristobal1767]

Aquí hice unos pequeños apuntes compañeros 😀 👇 /** * 📝 Los Eventos 👉 Es aquel mecanismo que tenemos en JS para poder controlar las acciones del usuario y definir ciertos comportamientos del documento q sucedan en cierto momento o cuando se cumplan algunas condiciones. 👉 Ahora, las funciones q se ejecutan en un Evento es lo q se conoce como el Event Handler o traducido Manejadores de Eventos, o tmb Observadores o Escuchadores. 👉 Hay 3 maneras de definir los Eventos en JS : */ /* **************************************************************************************************************************************** */ //1️⃣ COMO ATRIBUTO DEL HTML //👀 Muy importante: /*👉 Esta función se va a convertir en el Manejador de Eventos (Event Handler) *👉 Cuando una función se convierte en un Event Handler, es decir una función que se ejecuta en un Evento, nosostros podemos acceder a un Objeto especial q es el Evento en sí, y eso lo podemos acceder con la palabra reservada 'event' */ function holaMundo(){ alert('Holaaa Mundo') console.log(event) //👈 con esto en la consola, se desencadena un tipo de Objeto MouseEvent (evento del Mouse), y dentro de él se encuentran dos propiedades muy importantes: type y target. //👉 type.- es el tipo de evento q se desencadeno //👉 target.- es el elemento que origino el evento //👉 Dentro de target estan todos los eventos y propiedades q se pueden usar por dicho elemento y los q estan en null son eventos q no tienen definida dicha función en dichos eventos. En cambio vemos el evento onclick q si tiene definida la funcion holaMundo } /* ***************************************************************************************************************************************** */ //2️⃣ COMO MANEJADOR SEMÁNTICO //👉 Se le dice manejador semántico xq va teniendo una coherencia en la manera como la vamos definiendo //👉 cuando definamos un evento como semántico igualamos el evento semántico al nombre de la funcion pero sin (), xq los () hacen q cuando se cargue el Navegador se va a ejecutar const $eventoSemantico = document.getElementById('evento-semantico') $eventoSemantico.onclick = holaMundo //👈 no le ponemos () a la función xq sino al momento q se recarga el Navegador, se estará ejecutando el evento, y luego la consola nos dará undefined, xq el objeto event q mandamos a la consola no estará definido, xq la función se ejecutó asi como va, osea a la hora de cargar como tiene los parentesis se ejecuta. //👇 esta es otra manera de definir un Evento de tipo semántico, puede ser una función anónima o una arrow function $eventoSemantico.onclick = function(e){ //👈 Toda función q se convierte en un Manejador de Eventos, es decir una función q se ejecuta en algun momento en un evento no puede recibir parámetros, el único parámetro q recibe es el evento en sí, que lo podemos obtener con la palabra 'event' o en algunos casos abreviar con la letra 'e' alert(`Hola Manejador de Evento Semántico`) console.log(e) console.log(event) } /* **************************************************************************************************************************************** */ //3️⃣ COMO MANEJADOR MÚLTIPLE //👉 Si deseamos asignar varias funciones a un mismo elemento, tenemos el método .addEventListener() que nos perimite levantar un Escuchador de Eventos const $eventoMultiple = document.getElementById('evento-multiple') //👇 este método .addEventListener() recibe varios parámetros, pero sólo nos enfocaremos en 2: // 1° Nombre de evento // 2° Función q se va a ejecutar, pero sin parentesis $eventoMultiple.addEventListener('click', holaMundo) //👇 tmb podemos trabajar con una arrow function $eventoMultiple.addEventListener('click', (e) => { //👈 este addEventListener nos dará 2 alerts y 4 console.log, nos da 2 alerts xq en vez de reemplazar como pasa más arriba con el evento de tipo semántico, esta es la ventaja de maneja evento múltiple con addEventListener xq puede ejecutar más funciones alert(`Hola Manejador de Evento Múltiple`) console.log(e) console.log(e.type) console.log(e.target) console.log(event) } ) //📝NOTA: //👉 Cuando escuchemos de Event Handler hacemos referencia a la función q se ejecuta en dicho Evento //👉 Una misma función nos puede servir para desencadenar eventos en diferentes elementos //👉 Los eventos semánticos tienen un pequeño inconveniente, si nos damos cuenta, cuando hablabamos de los Prototipos y hablamos de la funcion constructora, y si queriamos agregarle más métodos teniamos q agregarle a su Prototipo, aqui pasa algo similar, el onclick es como agregarle un método al Prototipo del Modelo de eventos del elemento del DOM q se estamos manejando //👉 Habrá veces q a lo mejor a un mismo elemento Html le asignemos diferentes Manejadores de Eventos, es decir diferentes funciones q hagan diferentes cosas, bueno la limitante q tienen los eventos de tipo semántico, es q una vez q esta definido el evento semántico sólo va poder ejecutar una función. //👉 Toda función q se convierte en un Manejador de Eventos, es decir una función q se ejecuta en algún momento en un evento no puede recibir parámetros, el único parámetro q recibe es el evento en sí, que lo podemos obtener con la palabra 'event' o en algunos casos abreviar con la letra 'e'

[@jonmircha]

🤓👌

[@aronlife1098]

Esta información vale millones😁

[@ivangonzalezscaglia8902]

Muchas gracias Grover!!!!

[@Dulcee596]

Gracias!!!

[@andresgeary4433]

Gracias por los apuntes maestro!!!!

[@miguelantonioescuderoperal7485]

Maestro JhonMircha me imagine este codigo: que cuando das click al boton , me crea un elemento "p" con una frase y luego a los 3 segundos se borra automaticamente : const $eventoMultiple = document.getElementById("evento-multiple"); $eventoMultiple.addEventListener("click",(e)=>{ alert("hola mundo manejador de eventos multipels"); console.log(e); const $p = document.createElement("p") const frase = "hola como estas" $p.textContent = frase ; document.body.appendChild($p) $p.style.setProperty("Color","Red") $p.style.setProperty("font-size","30px") setTimeout(function() { document.body.removeChild($p); } , 3000); })

[@joelant03]

Gran asimilación y uso de nuevas habilidades amigo sigue así.

[@hernansanabria9685]

sept 11 1969**Nov 15 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

👋🏻😉

[@Wiiiiizard]

🧙‍♂Buen curso, muchas gracias!!!

[@jonmircha]

Gracias por comentar

[@sebastianmorales823]

Mi momento ha llegado!, justo desde aquí pensé comenzar a aprender javascript pero gracias al primer video donde explicaste lo ideal de aprender todo desde cero, bueno fue la mejor decisión estaría perdido y con muchos problemas de no haber seguido todo el curso

[@jonmircha]

;)

[@yanluisnunezlara319]

Así es bro, JavaScript y php son lenguajes raros que tiene fundamentos parecidos a los demás lenguajes pero tiene otras características que los diferencias y cuando tú crees que sabiendo otro lenguajes a profundidad vas a meter mano con ellos estás equivocado 😅

[@josedaniel3316]

buenisima clase, gracias jhon!!

[@jonmircha]

Con gusto

[@isidoraaxis6179]

Seguimos aqui!! buenisimo contenido!!

[@jonmircha]

Gracias por tu apoyo👋🏻😉

[@osakadev]

ya he llegado a mi parte favorita, estoy muy animado estos días, al final si pude lograr llegar a esta parte, suerte a todos y muchas gracias jon 😎😎

[@jonmircha]

👋🏻😉

[@valnetvln6802]

Amigo mil gracias por esta clase, he tenido varios cursos de JavaScript y pues siempre lo mismo, "y aquí solo ponemos e de event", solo veía que usan eventListener pero no sabía del por qué, y ahora lo entiendo perfectamente, por lo de los eventos semánticos y además más que nada para los eventos múltiples, muchas gracias, realmente me siento muy feliz por saber de dónde sale todo eso.

[@jonmircha]

De nada. Comparte para llegar a más personas :)

[@braianrico4422]

Estos mensajes motivan a personas como yo que estamos aprendiendo y a veces pensamos "y para que explica tantos métodos" jajaja Muchas gracias!!!

[@xd4915]

Tengo 17 años y gracias a vos cada dia soy mejor desarrollador web! Gracias

[@jonmircha]

Excelente!

[@danielfabiani4468]

Buongiorno...gracias jon.

[@jonmircha]

😉👋🏻

[@arceprog]

Gracias Jon Muy buen video y explicacion , llevo 1 y 4 meses estudiando desarrollo web , jajajaj , y me quiero de terminar tus videos de javascript que siempre me aportan algo nuevo o una mejor forma de entender

[@jonmircha]

👋🏻😉

[@alextina]

Gracias por compartir todo este conocimiento!!!!!!! Me vi hasta la clase 15 en orden, luego empece a buscar segun los temas que necesito. Aun así pienso verlo todo!

[@jonmircha]

😉👋🏻

[@williamalexanderpineda6098]

Excelente vídeo!

[@jonmircha]

👋🏻😉

[@Ni_idea_de_tecnologia]

Se va poniendo interesane. Gracias Sr.Mircha

[@jonmircha]

Un saludo👋🏻😉

[@giovanayucragavilan9004]

Estoy muy agradecida por el contenido me ha ayudado mucho!!.

[@jonmircha]

De nada, comparte para llegar a más gente :)

[@criadordeperroslostresdona9695]

gracias muy buena clase

[@jonmircha]

Hola, muchas gracias

[@isaacllanas2828]

Muchas gracias por el curso profe Jon. Ya anteriormente había interactuado con código JS y se me hacía muy complejo entender la sintaxis ya que vengo de C++ pero hace unos meses decidí darle full a esta serie de video y me es muy grato por fin entender y ver cómo todos lo que hemos visto va construyendo una gran pirámide, saludos profe.

[@jonmircha]

👋🏻😉

[@CaballoLoco666]

Jaja si c++ es mas dificil en sintaxis

[@braianrico4422]

Cada día que pasa veo más lejos el hacer mi propia pagina jajaja pero ver la caja de comentarios y visualizar que personas con conocimiento en este mundo agradecer tus explicaciones me motivan cada día a seguir adelante, hay muchas cosas que no entiendo el porque (entiendo lo que explicas pero mi mente piensa más allá y no contextualiza la funcionalidad) pero ver los comentarios ayudan (no a saber el porque, pero si a entender que se necesita saber y que en un futuro no lejano comenzare a entender su gran valor) De verdad que mil gracias y bendiciones !!! 🧙‍♂️🧙‍♂️🧙‍♂️

[@braianrico4422]

Jon por cierto, quería hacerte una pregunta. Tengo 2 conocidos que desean estudiar desarrollo web pero no tienen nada de conocimiento de programación. La pregunta es: ¿Es más recomendable que comiencen a realizar el curso de HTML y CSS o que comiencen con JS? Nuevamente mil gracias por todo Jon!!!

[@jonmircha]

Con HTML y CSS, luego que se pasen a JS

[@jonmircha]

😉🙌🏻

[@nachosanabria6942]

excelente videos gracias ......

[@jonmircha]

😉👋🏻

[@gusmoeta]

Hola, al menos en vscode, el "event aparece" "deprecated" y aunque funciona ya no dice "mouseevent" sino "pointerevent"

[@carlosjavierorozco8418]

Seguimos avanzando! gracias Jon

[@jonmircha]

👋🏻😉

[@codigobasicox]

Saludos desde Rep.Dom, y muchas gracias.

[@jonmircha]

Un saludo

[@eduardorivas6959]

Muchas gracias!. ya que esta de moda, eres el Jon Wick de Javacript. Saludos.

[@jonmircha]

😅

[@MrRampengu]

Uff si que estuvieron bien densas las clases de manejo del Dom, que bueno que ya empieza otro tema xd

[@jonmircha]

Los eventos siguen siendo DOM 🤭

[@ezequieljumilla9977]

El mejor canal de programación

[@jonmircha]

👋🏻😉

[@carlesbautista8293]

Muy bien explicado Jonathan, gracias por todo los conocimientos que nos brindas, son muy importantes para nosotros, :)

[@jonmircha]

Con mucho gusto

[@lorenzopiovano9577]

00:04 Hoy comenzaremos una serie de clases sobre cómo trabajar con eventos en javascript. 02:44 Eventos en JavaScript 05:14 El código JavaScript se puede ejecutar como alertas o funciones. 08:05 Comprender las diferentes formas de definir el manejo de eventos en HTML 10:48 Comprender los eventos semánticos y su ejecución. 13:09 Los controladores de eventos semánticos tienen la limitación de asignar solo una función por evento. 15:36 Los controladores de eventos no pueden recibir parámetros excepto el evento en sí. 17:57 Uso del método de escucha imprescindible para crear un controlador de eventos 20:18 Los eventos se pueden asociar con múltiples controladores de eventos. 22:34 Hay tres formas de trabajar con eventos en HTML

[@jonmircha]

👋🏻😉

[@johnherrera5913]

Master! en verdad muy agradecido por tu trabajo y tu conocimiento

[@jonmircha]

😉👍🏻

[@harrinsonA]

00:41 en andabamos pensando!

[@aldairmarcelo5432]

Gracias Jon! :'D

[@jonmircha]

De nada!

[@tongastonga22]

Gracias Sensei, creo que de a poquito mis neuronas van conectando jaja, saludos!!

[@jonmircha]

👋🏻😉

[@daimoncardenas5074]

Interesante como enseñas. Lo haces ver facil y amigable. Te felicito por esa habilidad para la enseñanza y muchas gracias por compartir este conocimiento.

[@jonmircha]

Hola, muchas gracias

[@KalSt]

Pude solucionar un bug que tenía en mi portafolio gracias a la explicación de la diferencia entre los escuchas de eventos y los eventos semánticos. Que grande.

[@jonmircha]

😉👍🏻

[@deyvi-kantuta]

Muchas gracias Yon......

[@jonmircha]

👋🏻😉

[@sebastianalfaro1887]

Gracias Jon, el contenido que nos compartiste con estos videos es invaluable. Saludos desde Argentina!

[@jonmircha]

😉👍🏻

[@leonardoprone5967]

Muy buena clase, Jon! gracias

[@jonmircha]

Con mucho gusto

[@JoseGomez-zm4ng]

Uh!! Nunca voy a terminar este curso!! Ahora me sumergiste en la Api de animaciones de Mozzilla!! Que gozaderaaa!! Graciass!!

[@jonmircha]

😅

[@Le0osS]

excelente!!!

[@jonmircha]

Gracias!

[@rodrigomauromunoz9819]

Sigue así.

[@jonmircha]

😉👍🏻

[@davidavellaneda133]

Que video 1000/10

[@jonmircha]

🙈🙌🏻

[@grovercristobal1767]

Muchas gracias profesor Jon, DIOS me lo siga guardando y bendiciendo!

[@jonmircha]

Gracias por tus bendiciones 🙌

[@juancruzledesma5693]

Siiiuuuu llegue a la mitad del curso despues de un mes y medio je

[@jonmircha]

Vientos!!!

[@emanuelr9815]

De nuevo muchas gracias por el curso, aquí andamos desde el primer día de 2021!!!

[@jonmircha]

Excelente!

[@timawid]

Este canal es una Joya 💎 ❤

[@jonmircha]

👋🏻😉

[@maximilianorestrepo4010]

Ya habia usado esto de AddEvent, pero no tenía idea de lo de event wow. Siempre sorprendido del contenido que enseñas

[@jonmircha]

;)

[@__.bastiann_]

Excelente clase maestro Jon, gracias por este contenido.

[@jonmircha]

Con mucho gusto

[@gonzalolenardon6684]

Hola Jon!! Muchas gracias por compartir tu conocimiento. Excelente el curso y la manera enseñar.

[@jonmircha]

😎👌

[@pgm3100]

Buenas tardes maestro, en mi caso, console.log(event), se tacha en el visual, y me dice que está en desuso, deprecated...etc.., la información que me da en la consola cuando pulso el button es PointerEvent en vez de MouseEvent, con todos los elementos y características comentados en el video, con la función anónima pasa igual, además me añade en la consola [Violation] 'click' handler took 1509ms, también con el addEventListener. Enhorabuena por tu bonito y educativo trabajo de pura ingeniería.

[@jonmircha]

👋🏻😉

[@tavospok]

Muchas gracias por tu tiempo Jon! Excelente curso!

[@jonmircha]

Con mucho gusto

[@cumpaMira]

Gracias profe!

[@jurrrgenOF]

buen vídeo hay una parte que dice: console.log(event); el event aparece que está en desuso pero igual sirvió no hay problema?

[@luisdanielayalavaldes5347]

a mi me sucede igual

[@angelicabolivar4818]

Me paso igual, aparece la palabra tachada!

[@jaxpk3]

Me pasa lo mismo. Alguno tiene mas info?

[@Karen-fy7mq]

El editor de codigo te lo señala solamente porque no está previamente definido, pero en realidad nosotros sabemos que ese evento viene por DEFECTO cuando se desencadena el evento...

[@gerardoanaya6159]

el obj "event" no es que este en desuso simplemente lo que esta en desuso es que no especifiques el event como parámetro de la función, ejemplo: - Practica en desuso: function holaMundo() { alert('Hola Mundo!'); console.log(event); } - La recomendable para que no aparezca la advertencia en VSC: function holaMundo(event) { alert('Hola Mundo!'); console.log(event); } El obj event lo inyecta JS automáticamente y por simplicidad el nombre del parámetro se le suele llamar solo "e" siendo una referencia de "event"

[@daniellosada6167]

Muy buen Video Amigo!! mucha Gracias.

[@jonmircha]

😃🙌🏻

[@heimancastro1954]

solo se que nada se, bueno ahora gracias al maestro jhon si se de eventos 🤑🤑🤑🤑🤑

[@jonmircha]

😅👋🏻

[@instintoimagen]

Gran lección del #curso de #javascript

[@jonmircha]

Muchas gracias!

[@matiasromera330]

zarpado

[@lautarodisalvo8360]

Actualizacion "event" ya es un parametro obsoleto (mayo del año 2023), hoy funciona Event, el propio visual studio te dice que ya está obsoleto igualmente pero lo menciono por si hay gente que no cae a la primera.

[@jonmircha]

👍🏻

[@sergiowinchester1233]

genio

[@jonmircha]

👋🏻😉

[@SOAD9489]

Muchas gracias por compartir tus conocimientos con nosotros, de verdad son muy útiles. Por cierto, ¿Que extensión usas para que te salgan las sugerencias y autocompletar los métodos y los nombres de los parámetros que puede recibir los métodos? Por ejemplo, cuando usaste el método AddEventListener, el primer parámetro que recibe es un string, y VS CODE te mostró todos los nombres de eventos que puedes colocar en forma.

[@jonmircha]

Mi configuración de VSCode la tienes aquí jonmircha.com/vscode

[@edwina.espinaltaveras4222]

actualmente en vscode me tacha la palabra reservada event, dice que esta en desuso

[@juangomezaguero7512]

event fue reemplazado por Event, o me da ese error ami...

[@juandanielvalderrama1485]

Cómo borran hacia la derecha

[@jonmircha]

con la tecla supr

[@alexiagarciasantos8453]

Para los amigos nuevos (como yo gg) que el event sale deprecated solo reciban como parámetro e en la función holaMundo(e) E impriman console.log(e);

[@jonmircha]

👋🏻😉

[@enriquesalazar8765]

Pero sigue saliendo como pointerEvent, no como MouseEvent, ¿no?

[@Gabriel-xp7it]

Hola una consulta. "event" quedo en desuso? ahora hay que usar unicamente "e"? Tambien notoque fuera de funciones si uso "e" o lo dejo vacio funciona igual. Gracias

[@harrinsonA]

Una pregunta, el VScode me señala que "event is deprecated", que reemplaza lo anterior?

[@JuanReyes-hl2nb]

Cómo guardar los cambios que se hacen con javascript?? Al actualizar la ventana se borran

[@edualfred]

Una consulta, profesor. Cuando cargo nuevo contenido con Ajax en la página, el addEventListener deja de funcionar en los botones que implemento. Es probablemente porque al cargar inicialmente todo el documento y al no encontrarse tales botones, pues se cargan posteriormente con Ajax, no los reconoce porque no existen aún en el DOM y por tanto no funciona el método. Cómo podría agregarle funcionalidad a tales botones que cargo con Ajax haciendo uso de Javascript?

[@jonmircha]

Con delegación de eventos

[@edualfred]

@@jonmircha Muchas gracias, profesor mircha. Voy a revisar ese capítulo para poder implementarlo :D

[@N.M.B]

Hola! Como se maneja el objeto "event" actualmente? ...VSC indica que actualmente esta "deprecated". Muchas gracias!

[@fabidev1501]

Ya sabes como?

[@evelinalvarado7332]

@@fabidev1501 pon event en HTML y como parametro tb

[@miguelantonioescuderoperal7485]

Buenas noches maestro Jon Mircha, gracias por sus videos son muy buenos, tengo una curiosidad en el nivel del video usted crea q uno ya es capaz de realizar unos proyectos ? :)

[@TroykaElectronics]

Hola Jon, muy agradecido por tus videos. Tengo una duda: en el evento "onclick" del "dom.html", utilizas la función "holaMundo()" que has declarado en el archivo "dom.js". he hecho lo mismo pero me arroja un error en la consola diciéndome que "holaMundo" no esta definida. analizando el porque del error, observo que esta función está declarada en un archivo .js. y para llamarla.. habría que darle la ruta del archivo .js?, asi como se hace tambien con "" ??? quedo atento a tu respuesta. Gracias.

[@jonmircha]

Pues si, la función tiene que existir en tu html o en el js la tiene que leer de algún lado

[@fabiocolman4286]

Buenas :) una pregunta, cuando se utiliza el manejador de eventos multiples addEvenListener, en todos los caso que se utilice referenciándose con una etiqueta el evento tiene que ser del mismo tipo? o pueden variar los eventos? por ejemplo si se utiliza primero el evento click, en los siguientes eventos debe ser click o se pueden usar otros? gracias!!

[@jonmircha]

Si necesitas diferentes tipos de eventos, entonces es un listener por evento

[@miltonumpierrez5853]

Estimado Jon, ante todo muchas gracias por el excelente material de estudio que aportas. Si me permites tengo una pregunta relacionada a esta clase, y es el significado del simbolo "$" en la constante "eventoSemantico". He visto en algunos lugares el uso de ese simbolo pero no he podido encontrar informacion al respecto. Suele aparecer mucho en JQuery, pero no se la relevancia que pueda tener en vanilla. Muchas gracias y un cordial saludo desde Montevideo, Uruguay

[@jonmircha]

Eso lo explico en la clase 63 kzbin.info/www/bejne/omfRoXqQlsSpncU

[@joelleiva6952]

Estoy por el minuto 6:52, en el cual podemos acceder a la palabra reservada event. Al momento de ponerla el editor de codigo(VS Code) me la marca como en desuso. Eso quiere decir que esta obsoleta??

[@jonmircha]

no te preocupes, despues lo vamos a abreviar a e

[@joelleiva6952]

@@jonmircha ✔✔

[@GerentedeSistemas]

event ya está depreciado

[@fabidev1501]

Hola! Como se maneja el objeto "event" actualmente? VSC indica que actualmente esta "deprecated". Muchas gracias!

[@jonmircha]

e

[@monsterleagueescritas]

A mí cabeza bien el toggle y pronóstico que con un evento click y ese método hacen los menús desplegables 😳 (checkpoint)

[@jonmircha]

sí

[@lucasdellamaggiore2544]

Hola Jon, muy bueno el curso, ahora tengo una duda, porque en mi editor cuando uso event, me lo tacha automaticamente?

[@jonmircha]

usa e

[@dantepadilla1297]

Hola profe ...primero lo quiero felicítarlo por lo didáctico que es para enseñar ...muchas gracias... quiero hacerle una consulta ... ¿¿ porque en mi Visual studio code cuando coloco (event) me aparece tachada???... trate de buscar la respuesta pero no la encuentro ... enyway cuando la coloco event tachada igual realiza la su función. de ante mano muchas gracias

[@jonmircha]

Por que esta deprecado reemplaza event por e y listo

[@TheWaalteers]

@@jonmircha Hola profe! en un evento con atributo y una funcion declarativa en el archivo JS si coloco la 'e' como parámetro y luego quiero verla por consola me sale undefined

[@Munoz-in1ew]

Cunado pondo el console.log(event) en VSCode, medice que 'event' is deprecated, ¿alguien sabe con que palabra lo reemplazaron?

[@alexiagarciasantos8453]

Le pones que recibes como parámetro e y en console.log(e);

[@Munoz-in1ew]

@@alexiagarciasantos8453 por alguna razón ya no me sale deprecated en VSCode de todos modos muchas gracias!

[@cristianrosas8674]

Me gusta mucho cómo explicas todas las formas, pero sinceramente a veces me quedo con la duda de cual es la mejor forma, ya se que "dependiendo dé...", pero aún así me deja un poco de incertidumbre

[@jonmircha]

PAra eso son las secciones de ejercicios, para que veas en donde conviene aplicar, partir de la clase 80 hay ejercicios del DOM

[@francineguerrero3103]

porque event me sale tachado ?

[@joda6970]

Que raro trate hacer estos ejercicio pero no funciona el event me sale con una linea en medio pero hize un ejercicio de javascript de otro lado y si funciono que raro o ya no se utiliza event

[@Alex-iv3nv]

event is deprecated, what should I use instead...

[@jonmircha]

e

[@stodani]

No entiendo cual sería el evento... entiendo que "e" vendría a ser el evento, y "event" también. Pero como sabe de que evento estoy hablando? cuando se llama a una función ahí se llama a la función y se le envia el parámetro, pero en este caso se llama con el click y no veo donde esta indicado cual es el evento exactamente

[@jonmircha]

con e.type puedes saber el tipo de evento

[@stodani]

@@jonmircha gracias!

[@javiergutierrez4373]

Veo que "event" aparece como "deprecated", todavía se puede usar o que se usa en su remplazo?

[@jonmircha]

pasar el evento explícitamente

[@gabrielperdomo9329]

@JHON ESTIWAR RODRIGUEZ CORREA Hola en el html cuando llamas al evento onclick="holamundo(event)"

[@davidm.8835]

Tengo una duda. Si yo quisiera crear un botón asignado a una función y quisiera reutilizar este mismo botón en varias partes de la página. Al no poder repetir el ID, se le podría llamar por NAME?

[@jonmircha]

Sí

[@ellocote5975]

cool

[@matiasgomez9416]

// 72. DOM: Manejadores de Eventos // developer.mozilla.org/es/docs/Web/Events function holaMundo() { alert("Hola Mundo"); console.log(event); } const $eventoSemantico = document.getElementById("evento-semantico"), $eventoMultiple = document.getElementById("evento-multiple"); // no es la mejor forma $eventoSemantico.onclick = holaMundo; // "holaMundo()" con los parentesis signifca que al momento de cargar el navegador se va a ejecutar (ejecución inmediata) // una vez definido el evento semántico, solamente va a poder ejecutar una sola función // otra forma de declarar evento semántico, (la estoy reemplazando), (esta es mejor) $eventoSemantico.onclick = function(e) { alert("Hola Mundo Manejador de Eventos Semántico"); console.log(e); console.log(event); } // observador de eventos $eventoMultiple.addEventListener("click", holaMundo); $eventoMultiple.addEventListener("click", (e) => { alert("Hola Mundo Manejador de Eventos Múltiple"); console.log(e); console.log(e.type); console.log(e.target); console.log(event); })

[@heferh4320]

yo al leer el titulo : javascript single thread event loop con operaciones de entrada y salida asincrono no bloqueante, eres tu de nuevo? ;0

[@jonmircha]

🤭

[@alexisscuderi196]

no me estarian funcionando los eventos en linea me aparece que la funcion no esta definida, incluso si pongo un alert o otra cosa

[@jonmircha]

😮

[@helipalacio8772]

🧔‍♂

[@zangetzu8303]

15:34

[@saulmacias6923]

"event" aparece deprecated, por que?

[@jonmircha]

¯\_(ツ)_/¯ Revisa la doc

[@cenidj12]

Trata de buscar tu la solución, eso te ayudará mucho. En caso de que no encuentres el porque te aparece la advertencia pása el event como parametro. Ejemplo: function holaMundo(event) { alert('Hola Mundo'); console.log(event); }

[@raulruidiazgoleadordeperu9524]

Porque esta en desuso basicamente

[@VanHelsing2021]

En mi pantalla no veo MouseEvent si no PointEvent

[@jonmircha]

😮

[@tecmiguell85]

me muestra como PointerEvent no como Mouse en el años 2022

[@stodani]

Perdón, el signo pesos $ delante de "eventoSemantico" para qué es?

[@jonmircha]

Para identificar a la variable como elemento del DOM

[@stodani]

@@jonmircha aaah ok, pero no es que le cambia algo al codigo de no ponerlo. seria mas bien como una convención, no?

[@evelinalvarado7332]

@@stodani Si

[@hernansanabria9685]

sept 11 1969**Nov 16 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

Gracias, saludos👋🏻😉