Eventos con
jQuery
Recordando: Eventos
Los eventos comunican acciones realizadas tanto por el
navegador como por el usuario, y ayudan a mejorar la
interacción entre una persona y un sitio web.
Eventos
en jQuery
Eventos con jQuery
Los eventos siguen siendo los mismos usando JavaScript
puro o jQuery, ya que el evento en sí (por ejemplo click) no
cambia, sólo cambia el modo de escribirlo.
=
Eventos comunes
Eventos comunes mouse: .click() y .dblclick()
.click(): La función se ejecuta cuando el usuario hace clic
en el elemento HTML.
.dblclick(): La función se ejecuta cuando el usuario hace
doble clic en el elemento HTML.
Eventos comunes mouse: .mouseEnter() y .mouseLeave()
.mouseenter(): Se produce cuando el puntero del ratón
está sobre el elemento seleccionado.
.mouseleave(): Se produce cuando el puntero del ratón
sale del elemento seleccionado.
Eventos comunes teclado: .keyDown, .keyPress, .keyUp
.keydown(): Se ejecuta cuando se pulsa la tecla, comienzo de la
presión.
.keypress(): Se ejecuta cuando la tecla está presionada.
.keyup(): Se ejecuta cuando la tecla es soltada.
Eventos comunes teclado: notas
Notas:
-El evento de keypress() es similar al evento keydown(),
sin embargo, el evento de keypress() no se dispara
para todas las teclas (por ejemplo ALT, CTRL, SHIFT,
ESC).
Eventos comunes Forms: .submit(), .change(),
.submit(): Sucede cuando el formulario es enviado. Sólo se
puede utilizar con elementos form.
.change(): Sucede cuando cambia el valor de un elemento.
(Sólo se puede utilizar con elementos input, textarea y select).
Eventos no tan
comunes
Eventos no tan comunes: .off() y .contextmenu()
.off(): Sirve para desvincular eventos. Por ejemplo para
eliminar el evento click en a podríamos hacer lo siguiente:
$(“a”).off(“click”);
.contextmenu(): Se activa cuando se hace click en el
botón derecho del mouse (antes de que aparezca el menú
contextual), o cuando se pulsa la tecla de menú contextual
(tecla con símbolo ).
Podemos probar el funcionamiento del evento a
quí.
Eventos comunes teclado: notas
¿Qué es un menú contextual?
El menú contextual es un menú de opciones que aparece al
hacer clic derecho sobre un elemento.
Eventos no tan comunes: .hover()
.hover(): Especifica dos funciones a ejecutar cuando el
puntero del ratón pasa sobre los elementos seleccionados.
Este método activa tanto el evento MouseEnter y
MouseLeave.
Podemos probar el funcionamiento del evento
aquí
Eventos no tan comunes: .event.pageX y .event.pageY
.event.pageX: Devuelve la posición del puntero del ratón ,
con relación al borde izquierdo del documento.
.event.pageY: Devuelve la posición del puntero del ratón ,
con relación al borde superior del documento.
Eventos no tan comunes: .event.target y .event.type
.event.target: Devuelve qué elemento DOM ha activado el
evento.
.event.type: Devuelve qué tipo de evento se desencadenó.
Eventos no tan comunes: .select()
.select(): El evento de selección se produce cuando se
selecciona un texto (marcado) en un área de texto o un
campo de texto
El método de select( ) activa el evento de selección, o
atribuye una función a ejecutar cuando se produce un evento
select .
Especiales
Especiales: hide y show
.hide(): Oculta elementos HTML.
.show(): Muestra los elementos.
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
- El parámetro de velocidad speed (opcional) especifica la velocidad de la
ocultación/muestra, y puede tomar los siguientes valores: slow, fast o
miliseconds.
- El parámetro callback (opcional) es una función a ejecutar después de que el
método hide o show se completa.
Especiales: toggle
.toggle(): Alterna entre los métodos hide() y show().
Oculta elementos que se ven y muestra elementos ocultos.
$
(selector).toggle(speed,callback);
El parámetro de velocidad speed (opcional) puede tomar los siguientes valores:
slow, fast o miliseconds.
El parámetro callback (opcional) es una función a ejecutar después de completar
el evento toggle()
Ver funcionamiento
Especiales: .fadeIn() y .fadeOut()
.fadeIn(): Usado para aparecer en
un elemento oculto.
.fadeOut(): Usado para
desaparecer un elemento visible.
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
- El parámetro de velocidad speed (opcional) especifica la duración del efecto.
Puede tomar los siguientes valores: slow, fast o miliseconds.
- El parámetro callback (opcional) es una función que se ejecuta cuando el
efecto se haya completado.
Especiales: .fadeToggle()
.fadeToggle(): Alterna entre el métodos fadeIn y fadeOut.
- El parámetro de velocidad speed (opcional) especifica la duración del efecto.
Puede tomar los siguientes valores: slow, fast o miliseconds.
- El parámetro callback (opcional) es una función que se ejecutará cuando el
efecto se haya completado.
$(selector).fadeToggle(speed,callback);
Especiales: .fadeTo()
.fadeTo(): Permite la decoloración a una opacidad dada
(valor entre 0 y 1).
$(selector).fadeTo(speed,opacity,callback);
- El parámetro de velocidad opcional especifica la duración del efecto. Puede
tomar los siguientes valores: slow, fast o miliseconds.
- El parámetro de opacidad especifica el nivel de opacidad que queremos
asignar al elemento, el valor deberá estar entre 0.00 y 1.00.
- El parámetro callback opcional es una función a ejecutar después de que el
Especiales: slideDown()
.slideDown(): Desliza hacia abajo los elementos
seleccionados.
$(selector).slideDown(speed,easing,callback)
- Speed especifica la duración del efecto.
Puede tomar los valores: slow, fast o
miliseconds.
- Easing puede recibir los valores linear
(velocidad lineal) y swing (lento al comienzo
y al final, y rápido al medio)
- El parámetro callback (opcional). Es una
función que se ejecutará cuando el efecto
Especiales: slideUp()
.slideUp(): Oculta/desliza hacia arriba los elementos
seleccionados.
$(selector).slideUp(speed,easing,callback)
- Speed especifica la duración del efecto.
Puede tomar los valores: "slow", "fast", o
miliseconds.
- Easing puede recibir los valores “linear”
(velocidad lineal) y “swing” (lento al
comienzo y al final, y rápido al medio)
- El parámetro callback (opcional) es una
función a ejecutar cuando el efecto se haya
Especiales: slideToggle()
.slideToggle(): Alterna entre los métodos slideIn() y
slideOut()
$(selector).fadeToggle(speed,easing,callback)
Eventos
vs. On
Eventos vs. On
En la última versión de jQuery han intentado unificar las APIs
de manejo de eventos en los métodos on y off. Estos
métodos sustituyen a los antiguos bind(), delegate() y live().
Si comparamos el uso de on() con el de atajos que ya
existían, como click(), tenemos el siguiente código:
Eventos vs. On
Estas dos construcciones son equivalentes, pero on() permite
hacer muchas más cosas.
Una de las cosas más interesantes es que permite usar un
mismo manejador de eventos para múltiples
elementos html suscribiendo el manejador a un
elemento padre.
Eventos vs. On
Ejemplo:
Si por algún motivo queremos asignar el mismo manejador de
eventos a todos los elementos <a>, podemos hacerlo de la
siguiente forma:
Eventos vs. On: Ventajas.
- Sólo se crea una única función,
independientemente del número de elementos <a> que
tengamos, reduciendo el consumo de recursos.
- Es válido para elementos que no existen
todavía. Si apareciera un nuevo elemento <a> dentro del
<div>, automáticamente estaríamos manejando su evento
click. Esto es especialmente útil cuando generamos html
dinámicamente.
Diferencias entre bind, live, delegate y on
Cronológicamente, la primera en aparecer fue bind. Después
apareció live para cubrir lo que no llenaba bind (la
delegación de eventos), pero live no funcionaba como se
esperaba, así que incorporaron delegate en detrimento de
live.
Por último y para evitar que la gente se volviera
loca teniendo que decidir si utilizar bind, live o
delegate, surgió on, que en un solo método reúne la
funcionalidad de todos los métodos anteriores.
.on()
.on(): La opción más recomendable. Se ha diseñado para
substituir los eventos delegate() y bind(). Si estamos usando
bind() pasar a usar on() es tan fácil como cambiar las
etiquetas, una por la otra.
Este método cede al controlador de eventos del
documento a los nuevos elementos que coincidan
con los criterios de nuestra condición. Con el fin de
mejorar su eficiencia, on() debe unirse de forma específica, no
generalizada.
.on()
La diferencia más notable con live() es que con on() sólo
realiza una llamada en vez de las n llamadas que realiza live().
Dicho de otra forma, cuando hacemos click en un elemento, si
lo manejamos con on() sólo se hará una llamada al DOM
desde ese elemento.
Si manejamos el evento click con live() se harán tantas
llamadas como elementos haya en la página en la que
estamos trabajando.
