¡Como en Two and a Half Men! Descubre los eventos que hacen que tu código cobre vida

Tue Nov 12 2024

Desarrollo

¡Hola Chiquis!👋🏻 ¿Te acuerdas de las locas situaciones que vivían Charlie, Alan y Jake en “Two and a Half Men”? Pues programar con JavaScript es un poco así: una serie de eventos inesperados que hacen que tu código cobre vida. ¡Vamos a conocer 11 de estos eventos y a compararlos con las divertidas situaciones de la serie!. Imagina que cada evento es un personaje o situación de la serie, y veremos cómo interactúan con el código. 🌟

Click: ¡Como cuando Jake pedía pizza! Cada vez que haces clic en un botón o un enlace, estás disparando un evento “click”. Es como cuando Jake pedía pizza: con un simple clic, desencadenaba una serie de acciones (en este caso, la llegada de su comida favorita).

click (Charlie Harper): Charlie es el alma de la fiesta, siempre haciendo clic en la vida. El evento click se dispara cuando haces clic en un elemento.

document.querySelector('button').addEventListener('click', () => {
    console.log('Charlie hizo clic en el botón');
});

Mouseover y Mouseout: ¡Como cuando Charlie espiaba a las vecinas! Estos eventos se activan cuando el cursor del ratón entra o sale de un elemento. Es como cuando Charlie se asomaba por la ventana para espiar a las vecinas: cada vez que el cursor se acercaba a un elemento, ocurría algo (¡y Charlie se emocionaba!).

mouseover (Alan Harper): Alan siempre está merodeando, observando todo. El evento mouseover se dispara cuando el puntero del ratón pasa sobre un elemento.

document.querySelector('div').addEventListener('mouseover', () => {
    console.log('Alan está merodeando sobre el div');
});

Keydown y Keyup: ¡Como cuando Charlie tocaba el piano (o intentaba)! Estos eventos se disparan cuando presionas o sueltas una tecla. Imagínate a Charlie tocando el piano: cada vez que presionaba una tecla, producía un sonido (o algo parecido).

keydown (Jake Harper): Jake, el niño curioso, siempre está presionando botones. El evento keydown se dispara cuando se presiona una tecla.

document.addEventListener('keydown', (event) => {
    console.log(`Jake presionó la tecla: ${event.key}`);
});

Submit: ¡Como cuando Alan intentaba conquistar a una mujer! Este evento se activa cuando envías un formulario. Es como cuando Alan intentaba conquistar a una mujer: con un “submit”, enviaba todas sus esperanzas y deseos.

submit (Judith): Judith siempre está enviando formularios y quejas. El evento submit se dispara cuando se envía un formulario.

document.querySelector('form').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevenir el envío real del formulario
    console.log('Judith ha enviado el formulario');
});

Load: ¡Como cuando Charlie abría una nueva lata de cerveza! Este evento se dispara cuando una página web se carga completamente. Es como cuando Charlie abría una nueva lata de cerveza: ¡un momento de felicidad y satisfacción!

load (Berta): Berta, la ama de llaves, siempre está lista para trabajar. El evento load se dispara cuando una página o un recurso se ha cargado completamente.

window.addEventListener('load', () => {
    console.log('Berta ha cargado la página');
});

Change: ¡Como cuando Jake crecía (y cambiaba sus gustos)! Este evento se produce cuando el valor de un elemento cambia. Es como cuando Jake crecía y sus gustos musicales cambiaban constantemente.
Resize: ¡Como cuando Alan intentaba entrar en forma! Este evento se activa cuando cambias el tamaño de la ventana del navegador. Es como cuando Alan intentaba entrar en forma y cambiaba su dieta y rutina de ejercicio.

resize (Herb): Herb, el vecino, siempre está ajustando cosas. El evento resize se dispara cuando se cambia el tamaño de la ventana del navegador.

window.addEventListener('resize', () => {
    console.log('Herb ha redimensionado la ventana');
});

Scroll: ¡Como cuando Charlie buscaba algo en el refrigerador! Este evento se dispara cuando haces scroll en una página. Es como cuando Charlie buscaba algo en el refrigerador: ¡siempre había algo interesante que encontrar!

scroll (Evelyn Harper): Evelyn, la madre de Charlie y Alan, siempre está desplazándose por la vida. El evento scroll se dispara cuando se desplaza la página.

window.addEventListener('scroll', () => {
    console.log('Evelyn está desplazándose por la página');
});

Error: ¡Como cuando Charlie metía la pata! Este evento se produce cuando ocurre un error en tu código. Es como cuando Charlie metía la pata y tenía que enfrentar las consecuencias.
focus (Chelsea) Chelsea, la novia de Charlie, siempre tiene toda su atención en él. El evento focus se dispara cuando un elemento gana el foco.

document.querySelector('input').addEventListener('focus', () => {
    console.log('Chelsea ha enfocado el input');
});

blur (Rose) Rose, la vecina obsesiva, pierde el foco cuando Charlie no está cerca. El evento blur se dispara cuando un elemento pierde el foco.

document.querySelector('input').addEventListener('blur', () => {
    console.log('Rose ha perdido el foco del input');
});

Conclusión Así que ahí lo tienes, los 11 eventos de JavaScript explicados con la ayuda de los personajes de “Two and a Half Men”. Cada uno de estos eventos es crucial para crear interactividad en tus aplicaciones web. ¡Espero que esta analogía te haya sacado una sonrisa y te haya ayudado a entender mejor estos eventos! 😊 Y así es como los eventos de JavaScript hacen que nuestras páginas web sean interactivas y dinámicas!

¡Gracias por leer y déjame tus comentarios! 👇🏻

🚀 ¿Te ha gustado? Comparte tu opinión. Artículo completo, visita: https://lnkd.in/ewtCN2Mn https://lnkd.in/eAjM_Smy 👩💻 https://lnkd.in/eKvu-BHe https://dev.to/orlidev https://lnkd.in/ecHHabTD https://pin.it/2BuZ9N4n8 https://linktr.ee/orlidevs ¡No te lo pierdas!

Referencias: Imágenes creadas con: Copilot ( microsoft.com )

#PorUnMillóndeAmigos #MakeYourselfVisible

¡Como en Two and a Half Men! Descubre los eventos que hacen que tu código cobre vida

https://my-million-friend-blog.vercel.app/blog/post-149/