Eventos en JavaScript

Los eventos en JavaScript son acciones o sucesos que ocurren en la página web, como hacer clic en un botón, mover el ratón sobre un elemento, enviar un formulario o presionar una tecla. Estos eventos pueden ser capturados y manejados mediante código JavaScript, lo que permite interactuar con los usuarios y proporcionar una experiencia dinámica.

¿Qué es un Evento?

Un evento es cualquier acción que el navegador puede reconocer y procesar. Los eventos son disparados por acciones del usuario, como hacer clic, presionar una tecla, o cambiar el valor de un campo de texto.

Tipos Comunes de Eventos

Algunos eventos comunes incluyen:

  • click: Se dispara cuando se hace clic en un elemento.
  • keydown: Se dispara cuando se presiona una tecla en el teclado.
  • keyup: Se dispara cuando se suelta una tecla en el teclado.
  • mouseover: Se dispara cuando el puntero del ratón se mueve sobre un elemento.
  • mouseout: Se dispara cuando el puntero del ratón sale de un elemento.
  • submit: Se dispara cuando se envía un formulario.

Cómo Manejar un Evento

Para manejar eventos en JavaScript, podemos usar varias técnicas, pero las más comunes son:

  • Usando el atributo HTML on: Se agrega directamente al elemento HTML.
    • 
<button onclick="alert('¡Hola!')">Haz clic</button>
  • Usando addEventListener en JavaScript: Se asocia un evento a un elemento desde el archivo JavaScript.
    • 
const boton = document.querySelector("button");

boton.addEventListener("click", function() {
    alert("¡Hola desde addEventListener!");
});

Ejemplo Básico con Eventos

Aquí tienes un ejemplo de cómo manejar un evento de clic en un botón utilizando JavaScript: 


<button id="miBoton">Haz clic en mí</button>
                
<script>
const boton = document.getElementById("miBoton");
                
boton.addEventListener("click", function() {
    alert("¡Has hecho clic en el botón!");
});
</script>

Evento click

El evento click se dispara cuando el usuario hace clic sobre un elemento. Este es uno de los eventos más utilizados en aplicaciones web interactivas. 


const boton = document.getElementById("miBoton");

boton.addEventListener("click", function() {
    alert("¡Clic realizado!");
});

En este ejemplo, cada vez que el usuario haga clic en el botón, se ejecutará una alerta que muestra el mensaje "¡Clic realizado!".

Evento keydown y keyup

El evento keydown se dispara cuando se presiona una tecla, y keyup se dispara cuando se suelta una tecla. Aquí tienes un ejemplo de cómo capturar estas acciones: 


document.addEventListener("keydown", function(event) {
    console.log("Tecla presionada: " + event.key);
});

document.addEventListener("keyup", function(event) {
    console.log("Tecla soltada: " + event.key);
});

Este código imprimirá en la consola el nombre de la tecla presionada y luego el nombre de la tecla soltada.

Evento submit

El evento submit se dispara cuando un formulario es enviado. Es común usarlo para realizar validaciones antes de que el formulario sea enviado. Aquí te mostramos cómo capturar el evento submit: 


const formulario = document.getElementById("miFormulario");

formulario.addEventListener("submit", function(event) {
    event.preventDefault(); // Prevenir el envío del formulario
    alert("Formulario enviado");
});

El método preventDefault() se usa para evitar que el formulario se envíe realmente, lo que es útil para realizar validaciones o procesar los datos antes del envío.

Evento mouseover y mouseout

El evento mouseover se dispara cuando el puntero del ratón pasa sobre un elemento, y mouseout se dispara cuando el puntero del ratón sale de un elemento. Puedes usar estos eventos para crear efectos interactivos. 


const caja = document.getElementById("miCaja");

caja.addEventListener("mouseover", function() {
    caja.style.backgroundColor = "yellow";
});

caja.addEventListener("mouseout", function() {
    caja.style.backgroundColor = "";
});

Este código cambia el color de fondo de la caja cuando el ratón pasa sobre ella y lo restaura cuando el ratón sale de ella.

Delegación de Eventos

La delegación de eventos es una técnica que consiste en asociar un solo manejador de eventos a un elemento padre en lugar de asociarlo a cada uno de los elementos hijos. Esto es útil cuando se agregan o eliminan elementos dinámicamente. Aquí tienes un ejemplo: 


const lista = document.getElementById("miLista");

lista.addEventListener("click", function(event) {
    if (event.target && event.target.nodeName == "LI") {
        alert("Elemento de la lista clickeado: " + event.target.textContent);
    }
});

En este caso, el evento de clic se maneja en el elemento padre miLista, y se verifica si el elemento clickeado es un LI para realizar la acción correspondiente.

Resumen

Los eventos en JavaScript permiten crear una interacción dinámica entre los usuarios y la página web. Puedes capturar eventos como clics, teclas presionadas, movimientos del ratón y envíos de formularios. Además, JavaScript ofrece varias formas de manejar estos eventos, como usando el atributo HTML on, el método addEventListener o la delegación de eventos. La correcta gestión de eventos mejora la experiencia del usuario y permite construir aplicaciones más interactivas y funcionales.

Anterior Siguiente