Eventos en JavaScript

Los eventos en JavaScript permiten interactuar con los usuarios. Podemos responder a eventos como clics, movimientos del ratón o el envío de formularios.

¿Qué es un Evento?

Un evento es cualquier cosa que ocurra en una página web, como hacer clic en un botón, mover el mouse o presionar una tecla.

Eventos de ratón: click, mouseover, mouseout
Eventos de teclado: keydown, keyup
Eventos de formulario: submit, change

Agregar un Evento con `addEventListener`

Podemos usar el método addEventListener para agregar un evento a un elemento.

// Seleccionar un elemento
let boton = document.getElementById("miBoton");

// Agregar un evento de clic
boton.addEventListener("click", function() {
    alert("¡Botón clickeado!");
});

Eliminar un Evento con `removeEventListener`

También podemos eliminar un evento usando removeEventListener. Primero necesitamos definir la función que se eliminará.

function mostrarAlerta() {
    alert("¡Botón clickeado!");
}

boton.addEventListener("click", mostrarAlerta);

// Eliminar el evento
boton.removeEventListener("click", mostrarAlerta);

Eventos del Teclado

Podemos escuchar eventos del teclado, como cuando se presiona una tecla.

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

Eventos del Ratón

Los eventos de ratón, como mouseover y mouseout, se activan cuando el usuario mueve el ratón sobre un elemento.

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

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

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

Eventos de Formularios

Podemos escuchar eventos de formularios, como cuando se envía un formulario o cambia un campo de texto.

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

formulario.addEventListener("submit", function(evento) {
    evento.preventDefault();  // Evita que el formulario se envíe
    alert("Formulario enviado");
});

Conclusión

Los eventos son fundamentales para hacer nuestras páginas web interactivas. Comprender cómo usarlos te permitirá crear experiencias de usuario más dinámicas y atractivas.