jQuery desde Cero: Eventos

Enlazando eventos

jQuery permite enlazar o desenlazar maneadores de eventos a elementos del DOM sin tener que preocuparse por la implementación de cada explorador web.

En la siguiente página de la documentación de jQuery se puede apreciar los distintos métodos que existen para adjuntar un evento a un manejador. Funciones como bind(), unbind(), delegate(), live(), están “deprecadas”, es decir, serán reemplazadas en futuras versiones de jQuery ya que se introdujeron funciones nuevas de reemplazo. Las funciones on() y off(), son las que deberían utilizarse en cambio. Veamos el siguiente ejemplo en un jsBin:

jQuery desde Cero

En este ejemplo vemos como enlazamos los eventos “mouseover” y “mouseleave” a una función que cambia los colores, para cuando el cursor se coloca sobre el elemento y cuando el cursor sale del mismo respectivamente.

Vamos a agregar otro manejador de eventos para que cuando se haga click se elimine el evento.

jQuery desde Cero

---

Utilizando el objeto “Evento” de jQuery

Utilizar el objeto Event facilita el trabajo unificando la implementación de cada explorador de los datos contenidos en el evento.

Las propiedades que podemos encontrar encapsuladas en este objeto son las siguientes:

• type: El tipo de evento (click, mouseover, mouseleave, etc.)
• target: El elemento que disparó el evento.
• data: datos pasados al manejador del evento.
• pageX pageY: las coordenadas del cursor relativas al documento cuando se disparó el evento.
• result: valor retornado del ultimo manejador.
• timestamp: la hora en milisegundos en que ocurrió el evento.
• preventDefault(): evita que el explorador ejecute la acción por defecto para el evento.
• isDefaultPrevented(): retorna false si preventDefault() fue invocado alguna vez, false de lo contrario.
• stopPropagation(): evita que el explorador propague el evento a los elementos padres del elemento.
• isPropagationStopped(): retorna false si stopPropagation() fue invocado alguna vez, false de lo contrario.

Vamos el siguiente ejemplo:

jQuery desde Cero

En el presente ejemplo disparamos el evento “mousemove” y utilizamos el objeto “Event” recibido en el manejador para mostrar las coordenadas del cursor en un div.

---

Conclusión

En el presente tutorial aprendimos como conectar eventos a funciones y a obtener información importante del objeto Event de jQuery.

Si te ha parecido util esta ayuda, por favor compártela. Así ayudarás a que podamos llegar a más personas que la necesiten tal y como tu la necesitaste.

Como siempre cualquier duda que tengas, no pienses dos veces antes dejarla en la sección de comentarios de más abajo.

Hasta la próxima.