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.
Eventos onmousedown, onmouseup e onclick- Apertando, soltando e clicando
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
