Eventos de Mouse - onmousedown, onmouseup, onclick, onMouseOver e onMouseOut

Neste tutorial de nosso curso de JavaScript, vamos aprender 5 importantes eventos de mouse: onmousedown, onmouseup, onclick, onMouseOver e onMouseOut

Com eles, vamos aprender a detectar quando o usuário apertou o botão, soltou, clicou, passou por cima e saiu de cima de uma área com o mouse.

Apostila JavaScript Progressivo em PDF para download

Eventos onmousedown, onmouseup e onclick- Apertando, soltando e clicando

O evento onmousedown significa 'quando o mouse for pra baixo', ou seja, quando você é o evento que detecta a ação de apertar o botão do mouse.

Já o evento onmouseup, significa 'quando o soltar o mouse', ou seja, é um evento que detecta o ato de soltar o botão do mouse

O terceiro evento, nós já conhecemos, é o onclick, e significa 'ao clicar'. Clicar é o ato de apertar e soltar alguma botão do mouse. Quando você só aperta, ele não faz nada, nem se somente soltar. Este evento só ocorre quando você clica, ou seja, quando você aperta e solta, a ação completa é que dispara o evento onclick, ok?

No script abaixo, criamos um botão em HTML e duas divs, que vão exibir a ação que você tomou.
Quando você clica no mouse, o evento onmousedown dispara a função "aperta()".
Quando você solta o botão do mouse, o evento onmouseup dispara a função "solta()".
E, por fim, quando você clica, o evento onclick dispara a ação "clica()".

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <button onmousedown="aperta()" onmouseup="solta()" onclick="clica()">Clique neu!</button>
  <div id="status"></div>
  <div id="status2"></div>
 </body>
</html>

script.js:

function aperta()
{
 var status=document.getElementById("status");
 status.innerHTML="Você apertou o botão do mouse";
}

function solta()
{
 var status=document.getElementById("status");
 status.innerHTML="Você soltou o botão do mouse";
}

function clica()
{
 var status2=document.getElementById("status2");
 status2.innerHTML="Você clicou com o botão do mouse";
}

Resultado:

Eventos onMouseOver e onMouseOut - Passando e Tirando o mouse de um elemento

Ainda no mundo dos eventos com o mouse, existem dois bem interessantes.

Um é o onMouseOver, que em inglês quer dizer 'quando o mouse tiver por cima', que detecta a ação do mouse estar sobre um determinado elemento da página.

Já o onMouseOut detecta o contrário: o evento de sair com o mouse de uma região.

No código abaixo, definimos um quadrado via div.
Ele originalmente tem fundo vermelho.

Quando passamos o mouse por cima, o evento onMouseOver é acionado, que chama a função "porCima()" e passa o atual objeto (this), que é a div, para a função. Lá, o fundo é alterado para verde.

Quando você tira o mouse de cima dessa região, o evento onMouseOut é acionado, que chama a função "porFora()", onde o parâmetro é o objeto atual. Dentro da função, alteramos o fundo do objeto (div) para azul.

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <div onmouseover="porCima(this)" onmouseout="porFora(this)"
   style="background-color:#FF0000; width:100px; height:100px;">Coloque o mouse aqui</div>
 </body>
</html>

script.js:

function porCima(obj)
{
 obj.style.backgroundColor = "#00FF00";
    obj.innerHTML = "Mouse dentro!";
}
 
function porFora(obj)
{
 obj.style.backgroundColor = "#0000FF";
    obj.innerHTML = "Mouse fora!";
}

Resultado:

Coloque o mouse aqui

JavaScript Progressivo