Explicaciones iniciales sobre el objeto evento en jQuery y mostramos cómo averiguar la posición del ratón al producirse un evento en la página.
Lo cierto es que lo que vamos a explicar ahora ya lo habíamos adelantado brevemente en otros artículos anteriores en los que comenzamos a ver los eventos de jQuery. Como ya hemos empezado a utilizar el objeto de evento, no debería resultarnos del todo extraño, pero tenemos muchas otras cosas que comentar.
Lo que ya hemos visto es que, al definir un evento con jQuery, tenemos que escribir una función con el código a ejecutar cuando se produzca el evento. Esa función recibe un parámetro, que es el objeto evento, que podemos utilizar dentro de la función del evento y que contiene diversas utilidades que pueden ser esenciales a la hora de codificar el evento.
Como cualquier otro objeto, el mencionado objeto de evento contiene diversas propiedades y métodos, los cuales detallaremos uno por uno más adelante. Sin embargo, cabe decir que nosotros ya hemos utilizado uno de los métodos en bastantes ejemplos a lo largo de este manual. Se trata del método preventDefault() del objeto evento, que sirve para prevenir (no realizar) el comportamiento por defecto de ese evento que estamos codificando.
El ejemplo que hemos realizado varias veces sobre preventDefault() es cuando definíamos un evento clic sobre un enlace. Cuando se hace clic sobre un enlace, el navegador se mueve a la dirección del href de ese enlace y con preventDefault() podemos evitar ese comportamiento por defecto de los enlaces. A continuación vamos a ver un ejemplo distinto de uso de las propiedades del objeto evento.
Averiguar la posición del ratón al hacer clic
En el objeto evento, entre otras muchas cosas, existen dos propiedades que nos informarán sobre la posición del ratón al producirse ese evento:
- pageX: que nos informa sobre el número de píxeles desde el lateral izquierdo de la página.
- pageY: con el número de píxeles desde la parte de arriba de la página.
Veamos el siguiente ejemplo:
$("#mielemento").click(function(e){
$("#mielemento").html("X: " + e.pageX + " - Y: " + e.pageY)
});
Al hacer clic en el elemento con id="mielemento" se mostrarán las coordenadas X e Y del lugar de la página donde se hizo clic. Las coordenadas se mostrarán como texto en la propia capa sobre la que se ha hecho clic.
Se puede ver una página con este código en funcionamiento.
Este código se puede modificar fácilmente para que se muestre las coordenadas del ratón al hacer clic en la página, independientemente de donde se haga clic y no sólo en un elemento en concreto.
$(document).click(function(e){
alert("X: " + e.pageX + " - Y: " + e.pageY)
});
Como se puede ver, se ha indicado el evento "click" sobre el objeto document, que existe en Javascript y que hace referencia a todo el documento que se está visualizando.
El código completo de una página que define este evento y utiliza las mencionadas propiedades del objeto evento es el siguiente.
<html>
<head>
<title>Trabajando con el 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>Trabajando con el objeto evento</h1>
Haz clic en cualquier parte de la página...
</body>
</html>
Podemos ver el ejemplo en funcionamiento en una página aparte.
Por ejemplo, con este código mostramos la posición del ratón al moverlo por la página, mostrando las coordenadas en el texto de los titulares h1 que pueda haber en la página:
$(document).mousemove(function(e){
$("h1").html("X: " + e.pageX + " - Y: " + e.pageY)
});
Si lo deseas, puedes ver el script en marcha aquí.
Con las nociones que tenemos en este momento sobre el objeto evento podremos continuar con las explicaciones sobre eventos, en las que utilizaremos varios aspectos de este objeto. Así pues, puedes continuar esta lectura aprendiendo acerca de los Eventos de ratón.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...