Cómo usar el objeto event de jQuery

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

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í

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

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 🙂