Eventos de Mouse - 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>