Eventos en Javascript

¿Que son los eventos?

Un evento en JavaScript es una acción que ocurre dentro de un elemento de la página web. Puede ser desencadenado por el usuario, como hacer clic en un enlace, o generado automáticamente por el navegador, como la carga completa de la página. Los eventos son la base de la interactividad en JavaScript y nos permiten crear respuestas y comportamientos personalizados.

Uso basico de los eventos

Para utilizar eventos en JavaScript, se utiliza el método addEventListener. Este método permite asociar una función (conocida como "manejador de eventos") a un elemento HTML y especificar qué evento se debe escuchar. La función se ejecutará automáticamente cuando ocurra el evento especificado.

const boton = document.querySelector('#mi-boton');

function manejarClic() {
  console.log('¡Se hizo clic en el botón!');
}

boton.addEventListener('click', manejarClic);

En este ejemplo, seleccionamos el botón con el identificador mi-boton utilizando document.querySelector. Luego, definimos la función manejarClic, que simplemente imprime un mensaje en la consola. Finalmente, llamamos a addEventListener en el botón y le pasamos el evento 'click' y la función manejarClic como argumentos. Ahora, cada vez que el usuario haga clic en el botón, se ejecutará la función manejarClic.

Existen numerosos tipos de eventos en JavaScript que se pueden utilizar para interactuar con el usuario. Algunos ejemplos de eventos comunes incluyen:

📌 Eventos de ratón: como 'click', 'mouseover' (cuando el cursor se sitúa sobre un elemento), 'mouseout' (cuando el cursor sale de un elemento) y 'mousemove' (cuando el cursor se mueve dentro de un elemento).

📌 Eventos de teclado: como 'keydown' (cuando una tecla se presiona), 'keyup' (cuando una tecla se suelta) y 'keypress' (cuando se mantiene presionada una tecla).

📌 Eventos de formulario: como 'submit' (cuando se envía un formulario) y 'input' (cuando el contenido de un campo de entrada cambia).

Estos son solo algunos ejemplos, pero existen muchos más tipos de eventos que se pueden utilizar según las necesidades de tu aplicación web.

Eventos en elementos HTML

Para capturar y manejar eventos, JavaScript proporciona varios métodos y enfoques. Uno de los métodos más comunes es el uso de addEventListener(). Este método permite registrar una función que se ejecutará cuando ocurra un evento específico en un elemento HTML.

La sintaxis básica de addEventListener() es:

function manejarEvento(event) {
  // Código para manejar el evento
}

elemento.addEventListener(evento, manejarEvento);

La función manejarEvento puede tener cualquier nombre, pero es una buena práctica utilizar un nombre descriptivo que refleje la acción que realiza. El parámetro event es opcional y representa el objeto de evento que se genera cuando ocurre el evento. Este objeto contiene información sobre el evento y sus propiedades pueden ser utilizadas en el código de la función.

Objeto event

El objeto event es una parte fundamental del manejo de eventos en JavaScript. Cuando ocurre un evento, como hacer clic en un elemento o presionar una tecla, se genera un objeto event que contiene información relevante sobre el evento en sí. Este objeto proporciona datos sobre el tipo de evento, el elemento objetivo y otros detalles que son útiles para manejar y responder a la interacción del usuario.

Algunas propiedades clave del objeto event incluyen:

📌 event.type: Indica el tipo de evento que ha ocurrido, como "click", "keydown" o "submit".
📌 event.target: Hace referencia al elemento HTML en el que se originó el evento. Es especialmente útil cuando se trabaja con eventos delegados o se desea acceder a la información del elemento interactivo.
📌 event.preventDefault(): Método que se utiliza para evitar el comportamiento predeterminado del evento. Por ejemplo, se puede utilizar para anular el envío de un formulario o evitar que un enlace se abra.

Estas son solo algunas de las propiedades y métodos más comunes que se pueden encontrar en el objeto event. Dependiendo del tipo de evento y del contexto en el que se utiliza, pueden existir otras propiedades disponibles para acceder a información adicional.

---

PD: La imagen que uso en la portada de este post pertenece a este articulo en el cual me inspire para escribir.