Cuando en un navegador se dispara un evento, se almacena información sobre dicho evento en el objeto event. El objeto event contiene información cuando ha sucedido el evento como por ejemplo, las coordenadas del ratón, el elemento que lo provocó o que tecla fue pulsada.
Podemos acceder al objeto event asignándolo como parámetro en la función del manejador de evento. Podríamos poner como ejemplo que al clicar en la página, saber las coordenadas donde se origino el click
|
1 2 3 4 5 |
$(document).click(function(evt) { var x = evt.pageX; var y = evt.pageY; alert('X:' + x+ ' Y:' + y); }); |
La clave de este ejemplo es la variable evt. Cuando la función es llamada, clicando en cualquier parte de la ventana del navegador, el objeto event se almacena en la variable evt. Se pueden acceder a diversas propiedades usando la sintaxis del punto, evt.pageX por ejemplo.
Esta tabla muestra las propiedades del objeto event
| Propiedad | Descripción |
|---|---|
| pageX | La distancia en pixels del puntero desde el borde izquierdo de la ventana del navegador |
| pageY | La distancia en pixels del puntero desde el borde superior de la ventana del navegador |
| screenX | Devuelve la distancia que hay entre el puntero partiendo del borde izquierdo del monitor |
| screenY | Devuelve la distancia que hay entre el puntero partiendo del borde superior del monitor |
| shiftKey | Devuelve un booleano indicando si la tecla shift está presionada cuando el evento ocurre |
| which | Si se emplea el evento keypress, determina el código númerico de la tecla que ha sido pulsada. Ej: String.fromCharCode(evt.which) |
| target | Objeto que ha sido objetivo del evento, por ejemplo en caso del evento click, qué elemento fue clicado. |
| data | Si usamos la función on(), cuando accedamos al objeto event podremos acceder a las propiedades del objeto que ha sufrido el evento. Por ejemplo, evt.data.value devolvería el atributo value del elemento. |
Parar el comportamiento normal de un evento
Algunos de los elementos HTML están preprogramados para responder a eventos. Por ejemplo, si clicamos un vínculo nos carga una página, si clicamos en el submit de un formulario este envía los datos… Con jQuery (pero también con JavaScript) podemos detener el comportamiento de esos elementos.
Para poder prevenir la respuesta a un evento se emplea la función preventDefault(). Está función al ser parte del objeto event, sólo puedes acceder a ella dentro de una función de manejador de eventos.
Supongamos que tienes un formulario,cuando se pulse el botón de enviar los datos (submit) quieres evitar que se envíen para poder comprobar ciertos valores. En ese caso el preventDefault() sería así
|
1 2 3 4 5 6 7 8 9 |
<form id="formulario" action=""> <input type="submit" value="Enviar" /> </form> <script> $('#formulario').submit(function(evt){ evt.preventDefault(); //Se puede obtener el mismo resultado con return false; alert("Parece que no has enviado los datos"); }); </script> |
Eliminar eventos
Hay ocasiones en que es preciso eliminar un evento que has asignado previamente a un elemento. En esos casos se emplea la función off(). Para usarlo se emplea un selector del elemento al que quieres quitar el evento e invocas la función off() con nombre del evento como parámetro. Por ejemplo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<a href="">Enlace 1</a> <a href="">Enlace 2</a> <a href="">Enlace 3</a> <button id="desactivar">Desactiva</button> <script> //Cada vez que pases por encima de un elemento <a>, mostraras un aviso $('a').mouseover(function() { alert('Has pasado el ratón por encima'); }); //Ahora si clico el botón desactivar, hago que los vínculos no tengan el evento mouseover asignado $('#desactivar').click(function() { $('a').off('mouseover'); }); </script> |
Después de pulsar el botón, al pasar el ratón por encima de los vínculos no recibirás ningún alert. Pero, si quisieras quitar todos los eventos asignados, bastaría con invocar off() sin parámetros.
Y hasta aquí el objeto event en jQuery, espero que os haya gustado. A seguir picando 🙂