Mouse Events en JavaScript

En este artículo vamos a explicar cómo obtener los eventos del mouse o Mouse Events en JavaScript, uno de los dispositivos de entrada más utilizados en la web. Con el tiempo, los eventos relacionados con el mouse han evolucionado, convirtiéndose en una parte fundamental para interactuar con las aplicaciones web.

En el contexto de JavaScript, los eventos del mouse o Mouse Events, permiten a los desarrolladores gestionar las interacciones de los usuarios con los elementos de la página, como al hacer clic, soltar o pasar el cursor sobre un objeto, entre otros.

Usando addEventListener()

En JavaScript, para escuchar y gestionar los eventos de mouse o Mouse Events (y otros eventos), utilizamos el método addEventListener() del objeto EventTarget, tal y como explicamos en el artículo anterior EventTarget en JavaScript. Este método permite asociar un event listener (escuchador de eventos) a un evento específico sobre un objeto. En nuestro caso, usaremos la instrucción JavaScript addEventListener() para gestionar los Mouse Events o eventos del mouse. Su sintaxis básica es la siguiente:

element.addEventListener(event, function(e), useCapture);

• element: Elemento sobre el cual queremos obtener la escucha (window, document, div, button, etc.)
• event: El tipo de evento del ratón que queremos escuchar. En este caso, serían los Mouse Events como click, mousedown, mousemove, etc.
• function: La función que se ejecutará cuando el evento ocurra, podemos crear la función en linea o pasarla como argumento. Esta función recibe un objeto de evento (e) como parámetro, que contiene la información sobre el evento (como las coordenadas del mouse, el botón presionado, etc.).
• useCapture (opcional): Un valor booleano que indica si el evento se debe capturar durante la fase de captura (cuando se propaga desde el documento hacia el objetivo) o en la fase de burbujeo (cuando se propaga desde el objetivo hacia el documento). Este valor por defecto es false (fase de burbujeo).

Escuchar un clic en el documento

Para escuchar un evento click en todo el documento y ejecutar una función cada vez que el usuario haga clic en cualquier parte de la página podemos utilizar el siguiente código de ejemplo:

document.addEventListener('click', function(e) {
    console.log(`Clic detectado en las coordenadas: (${e.clientX}, ${e.clientY})`);
});

Este código asigna un listener que se ejecutará cada vez que el usuario haga clic en cualquier parte de la página. La función proporcionada imprimirá un mensaje en la consola y podemos utilizar las propiedades del objeto event para obtener información detallada sobre el evento de mouse. En este ejemplo, estamos utilizando las propiedades clientX y clientY para obtener las coordenadas del mouse relativas a la ventana del navegador, donde el usuario hizo clic.

Asociar Mouse Events sobre un elemento

En JavaScript también podemos asociar los Mouse Events o un evento solo a un elemento específico, por ejemplo, a un botón:

let myButton = document.querySelector('#myButton');

myButton.addEventListener('mousedown', function(e) {
    console.log(`Botón presionado en las coordenadas: (${e.clientX}, ${e.clientY})`);
});

En este caso, el evento solo se activará cuando el usuario presione el botón identificado con id="myButton". Esta es una manera de manejar eventos en elementos específicos.

Captura y Burbujeo de Mouse Events

Como mencionamos antes, useCapture permite controlar cuándo debe ocurrir el evento:

• Fase de captura: El evento se captura en el camino de propagación desde el documento hasta el objetivo (la fase de captura es el primer paso de la propagación).
• Fase de burbujeo: El evento se propaga en el camino desde el objetivo hasta el documento (fase predeterminada de propagación).

Si quisiéramos capturar un evento en la fase de captura, usaríamos true como valor para useCapture:

document.addEventListener('click', function(e) {
    console.log('Clic capturado en la fase de captura');
}, true); // Fase de captura

En la mayoría de los casos, no necesitarás usar la fase de captura, y la fase de burbujeo (valor por defecto de false) será suficiente.

¿Por qué usar addEventListener()?

Trabajar con los eventos del mouse o Mouse Events en JavaScript nos proporciona varias ventajas y estrategias que debemos conocer:

• Múltiples escuchadores: Puedes añadir varios listeners para el mismo evento en el mismo elemento sin sobrescribirlos, a diferencia de la propiedad on<evento>, que permite solo un listener a la vez. document.addEventListener('click', function(e) { console.log('Clic 1'); }); document.addEventListener('click', function(e) { console.log('Clic 2'); }); // Ambos listeners se ejecutarán
• Mejor control: addEventListener() te permite manejar los eventos de manera más flexible y estructurada, especialmente cuando quieres añadir o quitar listeners en función de la interacción del usuario.
• Compatibilidad: addEventListener() es compatible con todos los navegadores modernos, y es más robusto y potente que los métodos tradicionales como onclick.

El uso de addEventListener() en JavaScript es esencial para gestionar los Mouse Events de forma eficiente y flexible. Nos da la capacidad de escuchar y responder a las acciones del usuario de una manera que es fácil de manejar y controlar, sin sobrescribir otros listeners o afectar el flujo de otros eventos. Ahora que sabemos cómo interactuar con los eventos del mouse en JavaScript, añadir múltiples listeners y gestionar las interacciones, vamos a ver todos los eventos disponibles.

Mouse Events en JavaScript

Los Mouse Events son un conjunto de eventos que se disparan en función de las acciones realizadas por el mouse. Estos eventos se pueden asociar a elementos específicos de la página o al documento completo. En esta sección vamos a explicar los Mouse Events más comunes en JavaScript, explicando cómo capturar y manejar interacciones del usuario con el ratón. También examinaremos las propiedades que devuelven al ser disparados y comprenderemos mejor cómo utilizarlos en aplicaciones web.

Evento click y dblclick

El evento click se dispara cuando el usuario hace clic en un elemento y el evento dblclick se dispara cuando se hace doble clic. Las propiedades más comunes devueltas por el evento (e) incluyen:

• clientX y clientY: Coordenadas del mouse dentro del área visible del navegador, sin contar el scroll.
• offsetX y offsetY: Coordenadas del mouse relativas al borde superior izquierdo del elemento que disparó el evento.
• screenX y screenY: Coordenadas del mouse en la pantalla física del usuario.
• pageX y pageY: Coordenadas del mouse en relación con toda la página, incluido el (scroll).
• button: El botón del mouse que hizo el clic (0: izquierdo, 1: medio, 2: derecho).
• altKey, ctrlKey, shiftKey: Devuelven un valor booleano que indica si se estaba presionando la tecla Alt, Ctrl o Shift durante el clic.

Eventos mousedown y mouseup

Estos eventos se disparan cuando un botón del mouse es presionado (mousedown) o liberado (mouseup). Las propiedades más comunes devueltas por el evento (e) incluyen:

• clientX y clientY: Coordenadas del mouse dentro del área visible del navegador, sin contar el scroll.
• offsetX y offsetY: Coordenadas del mouse relativas al borde superior izquierdo del elemento que disparó el evento.
• screenX y screenY: Coordenadas del mouse en la pantalla física del usuario.
• pageX y pageY: Coordenadas del mouse en relación con toda la página, incluido el (scroll).
• button: El botón del mouse que se presionó o liberó (0: izquierdo, 1: medio, 2: derecho).
• buttons: Un valor bit a bit que indica qué botones están siendo presionados en ese momento (por ejemplo, 1 para el izquierdo, 2 para el derecho).

Evento mousemove

El evento mousemove se dispara continuamente mientras el mouse se mueve sobre un elemento o la página. Las propiedades más comunes devueltas por el evento (e) incluyen:

• clientX y clientY: Coordenadas del mouse dentro del área visible del navegador, sin contar el scroll.
• offsetX y offsetY: Coordenadas del mouse relativas al borde superior izquierdo del elemento que disparó el evento.
• screenX y screenY: Coordenadas del mouse en la pantalla física del usuario.
• pageX y pageY: Coordenadas del mouse en relación con toda la página, incluido el (scroll).
• movementX y movementY: La cantidad de movimiento en el eje X y Y desde el último evento mousemove.

Eventos mouseenter y mouseleave

Estos eventos se disparan cuando el mouse entra o sale del área de un elemento. A diferencia de mouseover y mouseout, no se disparan cuando el mouse entra o sale de un elemento hijo. Las propiedades más comunes devueltas por el evento (e) incluyen:

• clientX y clientY: Coordenadas del mouse dentro del área visible del navegador, sin contar el scroll.
• offsetX y offsetY: Coordenadas del mouse relativas al borde superior izquierdo del elemento que disparó el evento.
• screenX y screenY: Coordenadas del mouse en la pantalla física del usuario.
• pageX y pageY: Coordenadas del mouse en relación con toda la página, incluido el (scroll).
• target: El elemento que disparó el evento.

Eventos mouseover y mouseout

Similares a los eventos mouseenter y mouseleave, pero se disparan también cuando el mouse entra o sale de un elemento hijo. Las propiedades más comunes devueltas por el evento (e) incluyen:

• clientX y clientY: Coordenadas del mouse dentro del área visible del navegador, sin contar el scroll.
• offsetX y offsetY: Coordenadas del mouse relativas al borde superior izquierdo del elemento que disparó el evento.
• screenX y screenY: Coordenadas del mouse en la pantalla física del usuario.
• pageX y pageY: Coordenadas del mouse en relación con toda la página, incluido el (scroll).
• relatedTarget: El elemento al que el mouse se mueve (en mouseout o mouseover).

Evento wheel

El evento wheel se activa cuando el usuario gira la rueda de un dispositivo apuntador, generalmente un ratón. Las propiedades más comunes devueltas por el evento (e) incluyen:

• deltaY: Indica la cantidad de desplazamiento en el eje vertical. Los valores positivos indican movimiento hacia abajo, los valores negativos indican movimiento hacia arriba.
• deltaX: Indica el desplazamiento en el eje horizontal. Los valores positivos indican movimiento hacia la derecha, los valores negativos indican movimiento hacia la izquierda.
• deltaZ: Indica el desplazamiento en el eje Z (profundidad), pocos dispositivos lo soportan, generalmente tiene un valor 0.
• deltaMode: Indica la unidad de medida en (deltaX, deltaY, deltaZ). Sus valores puede ser:
  • 0: Pixeles, el valor más común.
  • 1: Líneas, en desplazamientos con teclados o configuraciones especiales.
  • 2: Páginas, cuando el desplazamiento es de página completa.
• target: Referencia al elemento HTML sobre el que ocurrió el evento.
• timeStamp: Marca de tiempo del evento en milisegundos.
• clientX y clientY: Coordenadas del mouse dentro del área visible del navegador, sin contar el scroll.
• screenX y screenY: Coordenadas del mouse en la pantalla física del usuario.
• altKey, ctrlKey, shiftKey: Devuelven un valor booleano que indica si se estaba presionando la tecla Alt, Ctrl o Shift durante el clic.

Evento contextmenu

Este evento se dispara cuando el usuario hace clic con el botón derecho del mouse, generalmente para abrir el menú contextual. Las propiedades más comunes devueltas por el evento (e) incluyen:

• clientX y clientY: Coordenadas del mouse dentro del área visible del navegador, sin contar el scroll.
• offsetX y offsetY: Coordenadas del mouse relativas al borde superior izquierdo del elemento que disparó el evento.
• screenX y screenY: Coordenadas del mouse en la pantalla física del usuario.
• pageX y pageY: Coordenadas del mouse en relación con toda la página, incluido el (scroll).
• button: 2, ya que es el botón derecho del mouse.
• target: El elemento sobre el cual se hizo clic.

Ejemplos de Mouse Events en JavaScript

En el siguiente código JavaScript podemos ver un ejemplo de todos los Mouse Events o eventos del ratón explicados en este artículo.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eventos del Mouse en HTML</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    #area {
      width: 80%;
      height: 300px;
      padding: 10px;
      margin: 20px auto;
      border: 2px solid black;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f0f0f0;
    }
    #recuadro {
      width: 80%;
      padding: 10px;
      margin: 20px auto;
      border: 2px solid black;
      background-color: #e0e0e0;
      font-family: Consolas, monospace;
      white-space: pre-wrap;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <h2>Prueba de Eventos del Mouse</h2>
  <p>Interactúa con el área de abajo y observa los valores en el recuadro de texto.</p>
  <div id="area">Mueve el mouse aquí</div>
  <div id="recuadro">Aquí se mostrarán los valores de los eventos del mouse...</div>
  <script>
    const area = document.getElementById("area");
    const recuadro = document.getElementById("recuadro");
    function mostrarEvento(e) {
      const detalles = `
            Evento: ${e.type}
            Botón presionado: ${e.button}
            Posición (X, Y): (${e.clientX}, ${e.clientY})
            Teclas presionadas - Ctrl: ${e.ctrlKey}, Shift: ${e.shiftKey}, Alt: ${e.altKey}
            Elemento objetivo: ${e.target}
            clientX: ${e.clientX}
            clientY: ${e.clientY}
            screenX: ${e.screenX}
            screenY: ${e.screenY}
            offsetX: ${e.offsetX}
            offsetY: ${e.offsetY}
            pageX: ${e.pageX}
            pageY: ${e.pageY}
            `;
      recuadro.textContent = detalles;
    }
    // Eventos básicos de clic
    area.addEventListener("click", mostrarEvento);
    area.addEventListener("dblclick", mostrarEvento);

    // Eventos de botón presionado/liberado
    area.addEventListener("mousedown", mostrarEvento);
    area.addEventListener("mouseup", mostrarEvento);

    // Evento de movimiento
    area.addEventListener("mousemove", mostrarEvento);

    // Eventos de entrada y salida
    area.addEventListener("mouseenter", mostrarEvento);
    area.addEventListener("mouseleave", mostrarEvento);
    area.addEventListener("mouseover", mostrarEvento);
    area.addEventListener("mouseout", mostrarEvento);

    // Evento de la rueda del mouse
    area.addEventListener("wheel", function (e) {
      mostrarEvento(e);
      const detallesWheel = `
            -------------------------------
            Rueda - deltaY: ${e.deltaY}
            Rueda - deltaX: ${e.deltaX}
            deltaMode: ${e.deltaMode}
            timeStamp: ${e.timeStamp}
            `;
      recuadro.textContent += detallesWheel;
    });

    // Evento de clic derecho
    area.addEventListener("contextmenu", function (e) {
      e.preventDefault(); // Evita que se abra el menú contextual
      mostrarEvento(e);
      alert("Menú contextual bloqueado.");
    });
  </script>
</body>
</html>

Mouse Events en JavaScript

Trabajar con los eventos del ratón o Mouse Events en JavaScript es una parte fundamental para interactuar con los elementos de una página web. Cada tipo de evento tiene sus propias propiedades que puedes utilizar para obtener la posición del mouse y reaccionar de manera efectiva a las acciones del usuario. Conocer cómo funcionan y sus propiedades nos permite personalizar la interacción del usuario con nuestra aplicación web y hacerla más intuitiva.

Aprender a manejar los Mouse Events o eventos del ratón en JavaScript es esencial para ofrecer una experiencia de usuario fluida y dinámica. En este artículo hemos cubierto los eventos más importantes asociados al mouse, pero existen otros eventos más avanzados y específicos que también pueden resultar útiles, como los eventos de arrastrar (drag, dragstart, dragend), que deben ser explicados en artículos posteriores y separados.

Ahora estás listo para implementar y manejar de manera más eficiente los Mouse Events en JavaScript en tu sitio web. Recuerda que puedes usar herramientas como console.log() para hacer pruebas rápidas con estas propiedades y entender mejor cómo funcionan en diferentes situaciones.

Puedes consultar la documentación oficial sobre los Mouse Events en JavaScript aquí.

¡ Espero que este artículo sea de vuestro interés !