Javascript >> Eventos de mouse

Todos elementos HTML possuem os atributos: onclick, onmouseover, onmouseout, onmousemove, onmousedown e onmouseup. Estes atributos são utilizados para iniciar a execução de comandos javascript quando determinados eventos acontecem.

onmousedown: É disparado quando apertamos um dos botões do mouse
onmouseup: É disparado quando soltamos o botão do mouse
onclick: É disparado sempre que clica-se sobre o elemento
onmouseover: É disparado sempre que o mouse passa por cima do elemento
onmouseout: É disparado sempre que o mouse sai de cima de um elemento
onmousemove: É disparado sempre que movemos o mouse

O uso destes atributos é idêntico ao uso dos demais atributos HTML, ou seja basta na tag desejada adicionar um espaço, depois o atributo desejado seguido do sinal de “=” e entre aspas o valor que o atributo irá receber.

Note que o valor recebido por estes atributos serão comandos javascript. Geralmente por uma questão de organização costumamos colocar a chamada de uma função neste local e na função implementamos todo o código javascript para executar a ação necessária, mas, também podemos escrever todo o código javascript necessário neste local, basta separa-los por “;” e não utilizar-se de quebras de linha. Veja o exemplo:

<div id=”ADiv” onClick=”MinhaFuncao();” onMouseOver=”var a = 3; alert(a-2); this.className=’ClasseTeste’;”>xxxxx</div>

No exemplo acima realizamos a chamada da função “MinhaFuncao” sempre que clicarmos sobre a div, enquanto que, sempre que passarmos o mouse sobre a div iremos executar todos os comandos javascript definidos no próprio atributo onMouseOver. Perceba que o último comando executado no onMouseOver é o seguinte “this.className=’ClasseTeste’;” note que utilizamos nesse comando o “this”. Quando temos um código javascript executado a partir de um evento definido no próprio elemento podemos fazer o uso do this e assim estaremos pegando uma referencia do elemento HTML em questão, no exemplo o uso do “this” substituiu o uso do “document.getElementById(‘ADiv’)”.

Note que ao informarmos o nome da classe CSS “ClasseTeste” utilizamos aspas simples ao invés de aspas duplas, o uso da aspas simples fez se necessário uma vez que se tivéssemos utilizado aspas duplas o HTML entenderia que estaríamos terminando de declarar o valor do atributo onMouseOver.

Obtendo as coordenadas atuais do mouse:

No javascript podemos obter as coordenadas do mouse na tela através do seguinte código:

<div id="coordenadas"></div>
<script>
function coordenadas(evento) {
        var x;
        var y;
        if (window.event){//Forma de se pegar as coordenadas no Internet Explorer ou Google Chrome
                x = window.event.clientX;
                y = window.event.clientY;
        }else{//Forma de se pegar as coordenadas no Firefox ou Google Chrome
                x = evento.clientX;
                y = evento.clientY;
        }

        document.getElementById("coordenadas").innerHTML = "Mouse em: " + x + ", " + y;
}
document.onmousemove = coordenadas;
</script>

Baixe aqui o arquivo com o exemplo acima.

Note que existe uma instrução "if (window.event){", ela foi colocada afim de fazer com que o script funcione tanto no Internet Explorer quanto no Firefox, dependendo do que você for fazer poderão existir problemas de compatibilidade entre os diferentes navegadores do mercado.