Eventos en jQuery

JQuery provee métodos para asociar controladores de eventos (event handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada. Dentro de la función, la palabra clave this hace referencia al elemento en que el evento sucede. La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste.

En este artículo se detallan todos los eventos disponibles en jQuery, estos métodos son utilizados para registrar comportamientos que son ejecutados cuando el usuario interactúa con el navegador web para manipular los comportamientos de la página web.

A lo largo del artículo se pueden observar los diferentes eventos y una breve descripción de cada uno de ellos. La idea sobre este artículo es tener un conocimiento claro de todo lo que se puede hacer con los eventos de jQuery antes de empezar a programar, por lo que este artículo es meramente explicativo y en futuros artículos se podrán observar los eventos en diferentes ejemplos.

EVENTOS JQUERY

 .bind()

Método que nos permite asociar un evento a un elemento del DOM. Se pueden incluir varios eventos, los cuales se asocian todos a la función indicada.

 .blur()

Lanzado sobre un elemento que acaba de perder el foco. Normalmente este evento se aplica a inputs de formularios para verificar que el usuario a introducido correctamente los datos de un campo.

 .change()

Enlazar un controlador para el evento change() (cambio) de JavaScript o reproducir ese evento en un elemento.

 .click()

Generar un evento cuando se produce un clic en un elemento de la página.

 .contextmenu()

Enlazar un controlador para el evento contextmenu() (contextual) de JavaScript o reproducir ese evento en un elemento.

 .dblclick()

Generar un evento cuando se produce un doble clic en un elemento de la página.

 .die()

Elimina los eventos asignados previamente a los elementos del DOM.

 .error()

Enlazar un controlador para el evento de JavaScript error.

 event.currentTarget

Devuelve el elemento sobre el que se ha lanzado el evento. Por ejemplo, si el evento es un onclick de un enlace, el currentTarget sería el enlace.

 event.data

Devuelve los datos que se hayan podido pasar al evento cuando se asocia con bind.

 event.delegateTarget

Contiene el elemento que esta en progreso de ejecución, utilizado cuando se trabaja con .on() para conocer quien invocó el evento.

 event.isDefaultPrevented()

Devuelve true, si se ha lanzado el método preventDefault() o false si no se ha lanzado el método.

 event.isPropagationStopped()

Devuelve true, si el método stopPropagation() ha sido llamado.

 event.metaKey

Devuelve true, si la “META key” se pulsó cuando se lanzó el evento. En caso contrario devuelve false.

 event.namespace

Devuelve el espacio de nombres específico cuando se ha llamado al evento.

 event.pageX

Devuelve la posición relativa del ratón en relación a la esquina izquierda del documento. Propiedad muy útil cuando se trabaja con efectos.

 event.pageY

Devuelve la posición relativa del ratón con respecto a la esquina superior del documento.

 event.preventDefault()

Si se llama a este método dentro de un evento, la acción predeterminada que se ejecuta por este evento nunca se realiza.

 event.relatedTarget

Identifica un target secundario para el evento, es apreciable cuando se trabaja con los eventos del mouse.

 event.result

Devuelve el último valor de un controlador de eventos que fue activado por este evento, a menos que el valor no se definiese.

 event.stopImmediatePropagation()

Previene que se ejecuten otras acciones que pudiera estar asociadas al evento.

 event.stopPropagation()

Detiene la propagación de un evento, con el objetivo que no se realice otra ejecución u otro listener lo escuche a través del DOM. Esto se conoce como “bubbling“, al dar clic a un elemento, ese evento de clic lo pueden escuchar los “padres” de ese elemento.

 event.target

Devuelve el elemento DOM que inició el evento.

 event.timeStamp

Devuelve el número, en milisegundos, desde el 1 de enero de 1970, desde que el evento fue lanzado. Suele ser utilizado en pruebas de rendimiento de scripts.

 event.type

Devuelve el tipo de evento producido.

 event.which

Indica el botón o la tecla que ha sido pulsada, para eventos de teclado y ratón.

 .focus()

Definir acciones cuando se produce el evento focus de JavaScript, cuando el elemento tiene el foco de la aplicación.

 .focusin()

Evento que se produce cuando el elemento tiene el foco de la aplicación, puede producirse al hacer clic sobre un elemento o al presionar el tabulador y situar el foco en ese elemento.

 .focusout()

Evento que se produce cuando el elemento pierde el foco de la aplicación, puede ocurrir cuando el foco está en ese elemento y se pulsa sobre tabulador, o el usuario se mueve a otro elemento con el ratón.

 .hover()

Función para controlar dos eventos, uno cuando el ratón entra y otro cuando sale de encima de un elemento. Por tanto espera recibir dos funciones en vez de una.

 jQuery.proxy()

Selecciona una función y devuelve una nueva que siempre tendrá un contexto particular.

 .keydown()

Evento que se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presión o se mantiene. Se produce una única vez en el momento exacto de la presión.

 .keypress()

Evento que se produce en el momento que se pulsa sobre un carácter, o se presiona otro tipo de tecla. Es como el evento keypress de JavaScript, se ejecuta una vez, como respuesta a una pulsación e inmediata liberación de la tecla, o varias veces si se pulsa una tecla y se mantiene pulsada.

 .keyup()

Evento keyup se ejecuta en el momento de liberar una tecla, es decir, al dejar de presionar una tecla que ya se estaba pulsando.

 .live()

Prácticamente igual a .bind() con la diferencia que asocia el evento al root del DOM y cuando un evento se dispara y llega al root se comprueba si el selector concuerda y se ejecuta la función.

 .load()

Se lanza tan pronto el elemento al que hemos asociado el evento ha terminado de cargarse por completo.

 .mousedown()

Genera un evento cuando el usuario hace clic, en el momento que presiona el botón e independientemente de si lo suelta o no. Sirve para el botón derecho del ratón como el izquierdo.

 .mouseenter()

Evento que se produce al situar el ratón encima de un elemento de la página.

 .mouseleave()

Evento que se produce cuando el ratón sale de encima de un elemento de la página.

 .mousemove()

Evento que se produce al mover el ratón sobre un elemento de la página. El evento puede producirse varias veces mientras está encima del elemento.

 .mouseout()

Enlazar un controlador al evento “mouseOut” de JavaScript. Se ejecuta cuando el usuario sale con el ratón de la superficie de un elemento.

 .mouseover()

Enlazar un controlador para el evento JavaScript “mouseover”. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que puede producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido.

 .mouseup()

Genera un evento cuando el usuario ha hecho clic y luego suelta un botón del ratón. El evento “mouseup” se produce sólo en el momento de soltar el botón.

 .off()

Función para desvincular los eventos sobre un elemento de la página.

 .on()

Permite asignar eventos a los elementos del DOM. Posee todas las ventajas de delegate() pero a su vez sirve como la función bind() dependiendo de como se use.

 .one()

Igual que bind, pero en este caso el evento sólo se ejecuta una vez. Un ejemplo podría ser que interese que cuando se pincha sobre un botón se muestre un mensaje (la primera vez), pero la segunda ya no lo muestre.

 .ready()

Evento que tiene como finalidad ejecutar alguna función inmediatamente después de caragar todo el documento HTML y su DOM correspondiente, garantizando que el código sea ejecutado sobre elementos que ya han sido desplegados.

 .resize()

Se lanza cuando se cambia el tamaño de la ventana. Este evento sólo se envía al objeto window.

 .scroll()

Se envía a los elementos que cambian su scroll ante una acción del usuario. Se aplica a los objetos ventana, frames y elementos con la propiedad overflow CSS puesta en estado “scroll”.

 .select()

Se lanza cuando el usuario selecciona un texto del elemento sobre el que se gestiona el evento. Aplicable sólo a los textarea y a los input de tipo texto.

 .submit()

Se lanza cuando un usuario está tratando de enviar un formulario (válido solo para formularios). Atención dependiendo del navegador el formulario puede ser enviado sin pulsar el botón de enviar, pulsando la tecla “ENTER”, cuando esto sucede este evento no se lanza, por lo que se debería verificar esa tecla con el evento “keypressed”.

 .toggle()

Evento que se produce al hacer clic con el ratón. Tiene la particularidad de que admite varias funciones, que se van alternando en su ejecución cuando el usuario realiza clics.

 .trigger()

Activa el evento especificado y el comportamiento predeterminado de un evento (como el envío de formularios) para los elementos seleccionados.

 .triggerHandler()

Método identico a .trigger() pero triggerHandler() no activa el comportamiento predeterminado del evento.

 .unbind()

Permite desenlazar un evento del elemento deseado. Puede ayudar a dejar de ejecutar cierto evento en un caso deseado.

 .unload()

Se lanza cunado un usuario navega fuera de la página web o se dirige hacia otra parte de la web. Se ejecuta siempre, incluso si el usuario cierra el navegador.

Para más detalles respecto a los eventos en jQuery se facilita el enlace a la documentación oficial api.jquery.com/category/events

En próximos artículos de la web se tratarán otros puntos como las acciones de botones de limpiar o de cancelar, las transiciones con JQuery, entre otros elementos. No os los perdáis.

 

Se recuerdan los artículos relacionados sobre JQuery:

 
Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *