Tratando os eventos do mouse com jQuery

Neste artigo, veremos quais são e como utilizar as funções nativas do jQuery para se tratar os eventos do mouse sobre elementos da página. Através de exemplos práticos, conheceremos as formas de interação do cursor do mouse e como utilizá-las no desenvolvimento de páginas web.

Para os códigos que veremos aqui, suponho que o leitor já tem conhecimento ao menos básico desta biblioteca e sabe quais os procedimentos para utilizá-la em uma página HTML, logo, darei ênfase ao funcionamento dos eventos em si.

Nos exemplos que serão apresentados, utilizaremos a seguinte estrutura HTML:

Listagem 1: Estrutura HTML utilizada nos exemplos

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<style type="text/css">
		#div1{
			width:100px;	
			height:100px;
			background:orange;
		}
	</style>
</head>
<body>
	<div id="div1"/>
</body>
</html>

A forma como o leitor adicionará os scripts à página, se internamente ou em um arquivo separado, não influenciará diretamente no funcionamento do código.

mouseenter()

O evento mouseenter é disparado quando o cursor do mouse é posto sobre um determinado elemento. Caso o usuário continue movendo o cursor sobre o alvo, este evento não será disparado novamente, a menos que o cursor seja retirado de sobre o elemento em questão e recolocado. A Listagem 2 exibe uma mensagem quando o cursor do mouse entrar na área da div.

Listagem 2: Exemplo de uso do mousenter

$(function(){
	$("#div1").mouseenter(function(){
		alert("O cursor foi posicionado sobre a div.")
	});
});

mouseout()

Contrário ao mouseenter, o mouseout é disparado quando o cursor é removido de sobre o elemento. A Listagem 3 exibe uma mensagem quando o cursor sai da área da div.

Listagem 3:Exemplo de uso do mouseout

$(function(){
	$("#div1").mouseout(function(){
		alert("O cursor saiu da div.")
	});
});

mouseleave()

O mouseleave funciona exatamente como o mouseout, porém este evento havia sido desenvolvido para o Internet Explorer, mas devido à sua utilidade, a biblioteca jQuery permite utilizá-lo em qualquer browser. A Listagem 4 mostra um exemplo de seu uso, tomando como base a Listagem 3.

Listagem 4:Exemplo de uso do mouseleave

$(function(){
	$("#div1").mouseleave(function(){
		alert("O cursor saiu da div.")
	});
});

mousedown()

Esta é uma das partes integrantes do clique. O evento mousedown ocorre quando o botão do mouse (qualquer um) está pressionado, diferente do click que só é disparado após o botão ser solto. Na Listagem 5 vemos um exemplo de uso. Repare que não é necessário soltar o botão para que a mensagem seja exibida.

Listagem 5:Exemplo de uso do mousedown

$(function(){
	$("#div1").mousedown(function(){
		alert("O botao foi pressionado.")
	});
});

mouseup()

Semelhante ao anterior, porém, o evento é disparado quando o botão do mouse é solto. Podemos o mousedown e o mouseup como as duas partes do click. A seguir vemos um exemplo. Note que a mensagem só é exibida quando o botão do mouse (qualquer um) é solto.

Listagem 6: Exemplo de uso do mouseup

$(function(){
	$("#div1").mouseup(function(){
		alert("O botao foi solto.")
	});
});

mousemove()

O mousemove, como o nome sugere, é disparado quando o cursor do mouse se move sobre um elemento. Qualquer mínimo movimento faz com que esse evento seja disparado.

Nesse exemplo, utilizaremos uma estrutura diferente: exibiremos um texto (um contador) dentro da div quando o mouse se mover sobre ela.

Listagem 7: Exemplo de uso do mousemove

$(function(){
	varcont = 0;	
	$("#div1").mousemove(function(){
		$(this).html(cont++);
	});
});

mouseover()

Este evento funciona da mesma forma que o mouseenter, logo, dispensa maiores detalhamentos. A Listagem 8 exibe um exemplo de uso.

Listagem 8: Exemplo de uso do mouseover

$(function(){	
	$("#div1").mouseover(function(){
		alert("O cursor foi posicionado sobre a div.")
	});
});

click()

Dentre os que foram abordados aqui, este é, sem dúvida, o mais conhecido. Este evento é disparado quando o usuário clica sobre o elemento. Neste caso, é necessária a ação do clique completa, ou seja, pressionar e soltar o botão do mouse.

Listagem 8: Exemplo de uso do click

$(function(){	
	$("#div1").click(function(){
		alert("A div foi clicada.")
	});
});

dblclick()

Neste caso, o “dbl” é uma abreviação de “double” (duplo em inglês), logo, este evento trata o duplo clique do mouse sobre um elemento. O tempo entre os cliques é gerenciado pelo sistema operacional e pode ser configurado, mas este não é o foco deste artigo. Vejamos, na Listagem 9, um exemplo de uso deste evento.

Listagem 9: Exemplo de uso do dblclick

$(function(){	
	$("#div1").dblclick(function(){
		alert("A div foi clicada duas vezes.")
	});
});

hover()

Este é o evento mais complexo, mas não complicado, dentre os que tratamos aqui. O hover funciona como a junção do mouseenter e mouseout, recebendo uma função para tratar cada parte momento. A primeira função é executada quando o mouse é posto sobre o elemento e a segunda quando o mouse é tirado de lá. A sintaxe é simples e pode se compreendida com o exemplo a seguir.

Listagem 10: Exemplo de uso do hover

$(function(){	
	$("#div1").hover(
		function(){$(this).css("background", "blue")},
		function(){$(this).css("background", "orange")}
	);
});

No primeiro momento, ao posicionar o cursor sobre a div, a cor desta é alterada para azul e, logo em seguida, quando o mouse sai da área da div, ela volta a ser laranja.

Conclusão

Vimos aqui que a biblioteca jQuery dispõe de vários eventos para que se possa tratar, de forma simples, a interação do usuário através do mouse, tratando cada movimento individualmente ou em conjunto.

Concluo assim este artigo. Agradeço a atenção e até a próxima.

Desenvolvimento - Javascript