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.
//👀 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 }
//👉 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) }
//👉 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'
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);
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
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 😅
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
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!
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.
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.
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 !!! 🧙♂️🧙♂️🧙♂️
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!!!
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.
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.
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
Hola, profesor, vengo del futuro, el año 2024 y ahorita, según me tocó experimentar junto con las clases, el objeto global event ya está depreciado. Se puede acceder a sus valores como lo hiciste con los parámetros de las funciones del método onclick o de la callback del método addEventListener. Se le agrega un parámetro con la palabra e, ev, event, evento, miEvento, etc. y desde el scope de la función podemos acceder a las propiedades del evento.
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.
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.
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...
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"
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.
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
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.
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 ? :)
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!!
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?
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??
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
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
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 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
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
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?
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
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); }
// 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); })
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'
🤓👌
Esta información vale millones😁
Muchas gracias Grover!!!!
Gracias!!!
Gracias por los apuntes maestro!!!!
Excelente, muy bien explicado. Mil gracias. Saludos desde Bogota-Colombia
Hola, muchas gracias
Muchas gracias!. ya que esta de moda, eres el Jon Wick de Javacript. Saludos.
😅
El mejor canal de programación
👋🏻😉
sept 11 1969**Nov 16 2023
gracias excelente curso
felicidades John Mircha
Gracias, saludos👋🏻😉
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);
})
Gran asimilación y uso de nuevas habilidades amigo sigue así.
🧙♂Buen curso, muchas gracias!!!
Gracias por comentar
Seguimos aqui!! buenisimo contenido!!
Gracias por tu apoyo👋🏻😉
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 😎😎
👋🏻😉
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
;)
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 😅
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
👋🏻😉
Saludos desde Rep.Dom, y muchas gracias.
Un saludo
Se va poniendo interesane. Gracias Sr.Mircha
Un saludo👋🏻😉
buenisima clase, gracias jhon!!
Con gusto
Buongiorno...gracias jon.
😉👋🏻
Seguimos avanzando! gracias Jon
👋🏻😉
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!
😉👋🏻
Hola, al menos en vscode, el "event aparece" "deprecated" y aunque funciona ya no dice "mouseevent" sino "pointerevent"
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.
De nada. Comparte para llegar a más personas :)
Estos mensajes motivan a personas como yo que estamos aprendiendo y a veces pensamos "y para que explica tantos métodos" jajaja
Muchas gracias!!!
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.
👋🏻😉
Jaja si c++ es mas dificil en sintaxis
Excelente vídeo!
👋🏻😉
Muy buena clase, Jon! gracias
Con mucho gusto
gracias muy buena clase
Hola, muchas gracias
Estoy muy agradecida por el contenido me ha ayudado mucho!!.
De nada, comparte para llegar a más gente :)
excelente videos gracias ......
😉👋🏻
Tengo 17 años y gracias a vos cada dia soy mejor desarrollador web! Gracias
Excelente!
Master! en verdad muy agradecido por tu trabajo y tu conocimiento
😉👍🏻
Este canal es una Joya 💎 ❤
👋🏻😉
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 !!! 🧙♂️🧙♂️🧙♂️
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!!!
Con HTML y CSS, luego que se pasen a JS
😉🙌🏻
Muy bien explicado Jonathan, gracias por todo los conocimientos que nos brindas, son muy importantes para nosotros, :)
Con mucho gusto
Uff si que estuvieron bien densas las clases de manejo del Dom, que bueno que ya empieza otro tema xd
Los eventos siguen siendo DOM 🤭
00:41 en andabamos pensando!
Uh!! Nunca voy a terminar este curso!! Ahora me sumergiste en la Api de animaciones de Mozzilla!! Que gozaderaaa!! Graciass!!
😅
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.
Hola, muchas gracias
Muchas gracias Yon......
👋🏻😉
Siiiuuuu llegue a la mitad del curso despues de un mes y medio je
Vientos!!!
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.
😉👍🏻
Excelente clase maestro Jon, gracias por este contenido.
Con mucho gusto
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
👋🏻😉
Gracias Jon, el contenido que nos compartiste con estos videos es invaluable. Saludos desde Argentina!
😉👍🏻
excelente!!!
Gracias!
Gracias Jon! :'D
De nada!
Gracias Sensei, creo que de a poquito mis neuronas van conectando jaja, saludos!!
👋🏻😉
Muy buen Video Amigo!! mucha Gracias.
😃🙌🏻
De nuevo muchas gracias por el curso, aquí andamos desde el primer día de 2021!!!
Excelente!
Ya habia usado esto de AddEvent, pero no tenía idea de lo de event wow. Siempre sorprendido del contenido que enseñas
;)
Hola, profesor, vengo del futuro, el año 2024 y ahorita, según me tocó experimentar junto con las clases, el objeto global event ya está depreciado. Se puede acceder a sus valores como lo hiciste con los parámetros de las funciones del método onclick o de la callback del método addEventListener. Se le agrega un parámetro con la palabra e, ev, event, evento, miEvento, etc. y desde el scope de la función podemos acceder a las propiedades del evento.
👋🏻😉
Muchas gracias profesor Jon, DIOS me lo siga guardando y bendiciendo!
Gracias por tus bendiciones 🙌
Hola Jon!! Muchas gracias por compartir tu conocimiento. Excelente el curso y la manera enseñar.
😎👌
Gran lección del #curso de #javascript
Muchas gracias!
Muchas gracias por tu tiempo Jon! Excelente curso!
Con mucho gusto
Que video 1000/10
🙈🙌🏻
Sigue así.
😉👍🏻
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.
Mi configuración de VSCode la tienes aquí jonmircha.com/vscode
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.
👋🏻😉
buen vídeo hay una parte que dice:
console.log(event);
el event aparece que está en desuso pero igual sirvió no hay problema?
a mi me sucede igual
Me paso igual, aparece la palabra tachada!
Me pasa lo mismo. Alguno tiene mas info?
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...
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"
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.
👍🏻
Saludos Maestro Jon, me preguntaba si actualmente el evento que usted utilizó como MouseEvent ahora PointerEvent?
Además según investigué, pude darme cuenta que palabra reservada event esta desuso.
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
actualmente en vscode me tacha la palabra reservada event, dice que esta en desuso
solo se que nada se, bueno ahora gracias al maestro jhon si se de eventos 🤑🤑🤑🤑🤑
😅👋🏻
genio
👋🏻😉
Una pregunta, el VScode me señala que "event is deprecated", que reemplaza lo anterior?
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.
Pues si, la función tiene que existir en tu html o en el js la tiene que leer de algún lado
event fue reemplazado por Event, o me da ese error ami...
zarpado
Hola Jon, muy bueno el curso, ahora tengo una duda, porque en mi editor cuando uso event, me lo tacha automaticamente?
usa e
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 ? :)
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);
👋🏻😉
Pero sigue saliendo como pointerEvent, no como MouseEvent, ¿no?
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!!
Si necesitas diferentes tipos de eventos, entonces es un listener por evento
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?
Con delegación de eventos
@@jonmircha Muchas gracias, profesor mircha. Voy a revisar ese capítulo para poder implementarlo :D
Cómo guardar los cambios que se hacen con javascript?? Al actualizar la ventana se borran
event ya está depreciado
Hola! Como se maneja el objeto "event" actualmente? ...VSC indica que actualmente esta "deprecated". Muchas gracias!
Ya sabes como?
@@fabidev1501 pon event en HTML y como parametro tb
Cómo borran hacia la derecha
con la tecla supr
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??
no te preocupes, despues lo vamos a abreviar a e
@@jonmircha ✔✔
Hola! Como se maneja el objeto "event" actualmente? VSC indica que actualmente esta "deprecated". Muchas gracias!
e
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
Eso lo explico en la clase 63 ua-cam.com/video/l6npGZa_vgc/v-deo.html
Cunado pondo el console.log(event) en VSCode, medice que 'event' is deprecated, ¿alguien sabe con que palabra lo reemplazaron?
Le pones que recibes como parámetro e y en console.log(e);
@@alexiagarciasantos8453 por alguna razón ya no me sale deprecated en VSCode de todos modos
muchas gracias!
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
PAra eso son las secciones de ejercicios, para que veas en donde conviene aplicar, partir de la clase 80 hay ejercicios del DOM
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
Por que esta deprecado reemplaza event por e y listo
@@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
porque event me sale tachado ?
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
Veo que "event" aparece como "deprecated", todavía se puede usar o que se usa en su remplazo?
pasar el evento explícitamente
@JHON ESTIWAR RODRIGUEZ CORREA Hola en el html cuando llamas al evento onclick="holamundo(event)"
event is deprecated, what should I use instead...
e
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?
Sí
A mí cabeza bien el toggle y pronóstico que con un evento click y ese método hacen los menús desplegables 😳 (checkpoint)
sí
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
con e.type puedes saber el tipo de evento
@@jonmircha gracias!
cool
15:34
yo al leer el titulo :
javascript single thread event loop con operaciones de entrada y salida asincrono no bloqueante, eres tu de nuevo? ;0
🤭
no me estarian funcionando los eventos en linea me aparece que la funcion no esta definida, incluso si pongo un alert o otra cosa
😮
"event" aparece deprecated, por que?
¯\_(ツ)_/¯ Revisa la doc
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);
}
Porque esta en desuso basicamente
// 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);
})
🧔♂
En mi pantalla no veo MouseEvent si no PointEvent
😮
me muestra como PointerEvent no como Mouse en el años 2022
Perdón, el signo pesos $ delante de "eventoSemantico" para qué es?
Para identificar a la variable como elemento del DOM
@@jonmircha aaah ok, pero no es que le cambia algo al codigo de no ponerlo. seria mas bien como una convención, no?
@@stodani Si
sept 11 1969**Nov 15 2023
gracias excelente curso
felicidades John Mircha
👋🏻😉