Introducción a los Eventos

Los eventos son el mecanismo que provee el navegador para detectar cuándo ocurre una acción específica (por ejemplo, un clic, una pulsación de tecla o el término de la carga de una imagen) y ejecutar el código asociado a esa acción. Estos eventos sirven como notificaciones que indican que algo relevante ha sucedido y nos permiten programar respuestas sin necesidad de conocer de antemano el momento exacto en que ocurrirán. La gestión de estos eventos se realiza a través del DOM (Document Object Model).

📖 Importante: Utilizar eventos ayuda a desacoplar el código. Esto significa que podemos especificar qué acción llevar a cabo sin importar quién o dónde se genera el evento, lo que facilita la modularidad y el mantenimiento del código.

Conceptos Clave

• Evento: Es la acción que ocurre (p. ej., click, keyup, mouseover).
• Manejador (Handler): Es la función que define la respuesta a un evento.
• Escuchar eventos: Proceso de configurar una función para que se ejecute cuando se produzca un evento específico.

Principales Tipos de Eventos

Los eventos se pueden clasificar según la interacción a la que responden:

Eventos de Ratón

• onclick: Se ejecuta al hacer clic en un elemento.
• ondblclick: Al hacer doble clic.
• onmousedown / onmouseup: Al pulsar y soltar un botón del ratón.
• onmouseover / onmouseout: Al entrar o salir el puntero de un elemento.
• onmousemove: Se dispara continuamente mientras el ratón se mueve sobre el elemento.
• onwheel: Al utilizar la rueda del ratón para hacer scroll.

Eventos de Teclado

• onkeydown: Al presionar una tecla (se repite si se mantiene pulsada).
• onkeyup: Al soltar la tecla.
• onkeypress: Al pulsar teclas de caracteres alfanuméricos (puede variar en comportamiento según la tecla).

Eventos HTML/Ventana

• onload: Se activa cuando se ha cargado completamente una página, imagen u objeto.
• onunload: Cuando la página o un objeto se elimina (por ejemplo, al cerrar la ventana).
• onchange: Cuando cambia el contenido de un campo (<input>, <textarea>, <select>).
• onsubmit y onreset: Al enviar o reiniciar un formulario.
• onresize y onscroll: Al modificar el tamaño de la ventana o desplazarse en un elemento con scroll.
• onfocus y onblur: Al recibir o perder el foco un elemento.
• onerror: Cuando ocurre un error (por ejemplo, en la carga de una imagen).

💬 Interesante: Puedes consultar un listado completo en W3Schools.

Formas de Asignar Manejadores de Eventos

Existen diversas estrategias para asignar manejadores a eventos:

Mediante Atributos HTML

Se especifica directamente en el elemento HTML mediante un atributo que indica el tipo de evento.

<!-- Código HTML con manejador inline -->
<input type="button" value="Saludar" onclick="alert('Hola mundo');" />
<input type="button" value="Llamar Función" onclick="miFuncion('parametro');" />

Uso del Objeto this en Atributos HTML

Dentro del mismo atributo, this hace referencia al elemento que generó el evento.

<!-- Cambia el borde al pasar el ratón -->
<div onmouseover="this.style.borderColor='black';">Pasa el ratón aquí</div>

Mediante Propiedades JavaScript

Se asigna la función directamente a la propiedad del elemento correspondiente al evento.

<!-- HTML -->
<button id="btnMensaje">Click me</button>

<!-- JavaScript -->
<script>
  function mostrarMensaje() {
    alert("¡Botón pulsado!");
  }
  document.getElementById("btnMensaje").onclick = mostrarMensaje;
</script>

❕ Atención: Al asignar la función, no agregues paréntesis. Usa mostrarMensaje y no mostrarMensaje() para evitar su ejecución inmediata.

Mediante addEventListener()

Esta forma es la más moderna y flexible, permitiendo asignar múltiples manejadores para el mismo evento en el mismo elemento.

<!-- HTML -->
<button id="btnMultiple">Haz doble clic</button>

<!-- JavaScript -->
<script>
  const btn = document.getElementById("btnMultiple");

  // Primera función manejadora
  btn.addEventListener("dblclick", function() {
    alert("Primer manejador de doble clic");
  });

  // Segunda función manejadora
  btn.addEventListener("dblclick", function() {
    console.log("Otro manejador de doble clic");
  });
</script>

Obteniendo Información del Objeto Evento

Cuando se ejecuta un manejador, el navegador envía automáticamente un objeto event como parámetro. Este objeto contiene detalles sobre el evento, por ejemplo:

• event.type: Indica el tipo de evento (ej. "click", "keyup").
• event.keyCode: Código de la tecla presionada (en eventos de teclado).
• event.clientX / event.clientY: Coordenadas del ratón relativas al navegador.
• event.screenX / event.screenY: Coordenadas del ratón en relación a la pantalla.

Ejemplo:

<!-- HTML -->
<button id="btnCoords">Obtener Coordenadas</button>

<!-- JavaScript -->
<script>
  function mostrarMensaje(evento) {
    if (evento.type === "click") {
      alert("Coordenadas: X=" + evento.clientX + ", Y=" + evento.clientY);
    } else if (evento.type === "keyup") {
      alert("Código de tecla: " + evento.keyCode);
    }
  }

  const btnCoords = document.getElementById("btnCoords");
  btnCoords.onclick = mostrarMensaje;
  document.addEventListener("keyup", mostrarMensaje);
</script>

Drag and Drop (Arrastrar y Soltar)

El “Drag and Drop” es un proceso que permite arrastrar y soltar elementos en la página. Se basa en varios eventos específicos:

• ondragstart: Se inicia cuando empieza a arrastrarse un elemento.
• ondragover: Se dispara cuando el elemento arrastrado se encuentra sobre una zona de destino.
• ondrop: Se activa al soltar el elemento en la zona de destino.

Para profundizar en este tema, puedes consultar la documentación de W3Schools, donde se ofrecen ejemplos completos y teóricos.