Na verdade, o que vamos explicar agora já foi antecipado brevemente em outros artigos anteriores nos que começamos a ver os eventos de jQuery. Como já começamos a utilizar o objeto de evento, não deverá ser totalmente estranho, porém temos muitas outras coisas que comentar.
O que já vimos foi que, ao definir um evento com jQuery, temos que escrever uma função com o código a ser executado quando se produza o evento. Essa função recebe um parâmetro, que é o objeto evento, que podemos utilizar dentro da função do evento e que contém diversas utilidades que podem ser essenciais à hora de codificar o evento.
Como qualquer outro objeto, o mencionado objeto de evento contém diversas propriedades e métodos, que detalharemos um a um mais adiante. Entretanto, cabe dizer que já utilizamos um dos métodos em bastantes exemplos ao longo deste manual. Trata-se do método preventDefault() do objeto evento, que serve para prevenir (não realizar) o comportamento por padrão desse evento que estamos codificando.
O exemplo que realizamos várias vezes sobre preventDefault() é quando definíamos um evento click sobre um link. Quando se clica sobre um link, o navegador se move para o endereço do href desse link e com preventDefault() podemos evitar esse comportamento por padrão dos links. A seguir, vamos ver um exemplo diferente do uso das propriedades do objeto evento.
Vejamos o seguinte exemplo:
$("#meuelemento").click(function(e){
$("#meuelemento").html("X: " + e.pageX + " - Y: " + e.pageY)
});
Ao clicar no elemento com id="meuelemento" serão mostradas as coordenadas X e Y do lugar da página onde se clicou. As coordenadas se mostrarão como texto na própria camada sobre a que se clicou.
Pode-se ver uma página com este código em funcionamento.
Este código pode ser modificado facilmente para que se mostrem as coordenadas do mouse ao clicar na página, independentemente de onde se clique e não só em um elemento específico.
$(document).click(function(e){
alert("X: " + e.pageX + " - Y: " + e.pageY)
});
Como se pode ver, se indicou o evento "click" sobre o objeto document, que existe em Javascript e que faz referência a todo o documento que está sendo visualizado.
O código completo de uma página que define este evento e utiliza as mencionadas propriedades do objeto evento é o seguinte.
<html>
<head>
<title>Trabalhando com o objeto evento</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$(document).click(function(e){
alert("X: " + e.pageX + " - Y: " + e.pageY)
});
})
</script>
</head>
<body>
<h1>Trabalhando com o objeto evento</h1>
clique em qualquer parte da página...
</body>
</html>
Podemos ver o exemplo em funcionamento em uma página à parte.
Por exemplo, com este código mostramos a posição do mouse ao movê-lo pela página, mostrando as coordenadas no texto dos encabeçamentos h1 que possa haver na página:
$(document).mousemove(function(e){
$("h1").html("X: " + e.pageX + " - Y: " + e.pageY)
});
Se você desejar, pode ver o script em funcionamento aqui.
Com as noções que temos neste momento sobre o objeto evento, poderemos seguir com as explicações sobre eventos, nas que utilizaremos vários aspectos deste objeto. Assim, você pode continuar esta leitura aprendendo sobre os Eventos de mouse.
