Eventos de Mouse em JavaScript

Eventos de mouse são alguns dos mais frequentemente utilizados em interações com elementos de interface no desenvolvimento web. Aqui estão alguns dos principais eventos de mouse e suas características:

click: Ocorre quando o usuário clica em um elemento.
dblclick: Ocorre com um clique duplo sobre o elemento.
contextmenu: Acionado ao abrir o menu de contexto (com o botão direito do mouse).
mousedown: Disparado quando o botão do mouse é pressionado sobre um elemento.
mouseup: Disparado quando o botão do mouse é solto sobre um elemento.
mousemove: Ocorre quando o cursor do mouse se move sobre o elemento.
mouseover: Acionado quando o cursor entra nos limites de um elemento.
mouseout: Ocorre quando o cursor deixa os limites de um elemento.
mouseenter: Semelhante ao mouseover, mas não se propaga (bubble) para elementos pais.
mouseleave: Semelhante ao mouseout, mas não se propaga para outros elementos.

Há diferenças importantes entre os eventos mouseover/mouseout e mouseenter/mouseleave. Os eventos mouseenter e mouseleave são disparados apenas quando o cursor cruza os limites externos do elemento, enquanto mouseover e mouseout também são acionados quando o cursor se move para dentro ou para fora de um elemento filho.

A seguir, um exemplo prático de como esses eventos podem ser utilizados para mudar a cor de um elemento ao passar o mouse:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
    <style>
      #blueRect {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="blueRect"></div>

    <script>
      function setColor(e) {
        if (e.type === "mouseover") {
          e.target.style.backgroundColor = "red";
        } else if (e.type === "mouseout") {
          e.target.style.backgroundColor = "blue";
        }
      }
      const blueRect = document.getElementById("blueRect");
      blueRect.addEventListener("mouseover", setColor);
      blueRect.addEventListener("mouseout", setColor);
    </script>
  </body>
</html>

Neste código, o elemento HTML identificado por blueRect terá sua cor alterada para vermelho quando o mouse estiver sobre ele e retornará para azul quando o mouse sair.

Objeto MouseEvent

O objeto MouseEvent é específico para eventos de interação com o mouse e adiciona propriedades úteis para a manipulação desses eventos:

altKey: Retorna true se a tecla Alt estiver pressionada durante o evento.
button: Informa o número do botão do mouse que foi pressionado.
buttons: Mostra uma máscara de bit dos botões pressionados.
clientX, clientY: Coordenadas do cursor em relação à janela.
movementX, movementY: Mudança das coordenadas X e Y do cursor desde o último evento de mousemove.
screenX, screenY: Coordenadas do cursor em relação ao monitor.
shiftKey: Retorna true se a tecla Shift estiver pressionada.

Veja um exemplo de captura de coordenadas do clique:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
    <style>
      #blueRect {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="blueRect"></div>

    <script>
      function handleClick(e) {
        console.log("screenX: " + e.screenX);
        console.log("screenY: " + e.screenY);
        console.log("clientX: " + e.clientX);
        console.log("clientY: " + e.clientY);
      }
      const blueRect = document.getElementById("blueRect");
      blueRect.addEventListener("click", handleClick);
    </script>
  </body>
</html>