En esta parte del tutorial vamos a adentrarnos en el trabajo con eventos en jQuery, la idea es tener un conocimiento claro de todo lo que se puede hacer con jQuery antes de comenzar a programar. Los eventos junto con la selección de elementos de jQuery es la base para poder hacer luego casi cualquier cosa. Sed pacientes, prestad atención, y en la parte 3 del tutorial podremos ver en acción todo lo aprendido.
Lo ideal sería que leas y entiendas para que sirve cada evento de los mostrados aquí, así cuando empecemos a usarlos en el siguiente artículo sabrás de que va. No te preocupes si todo esto te parece demasiada información, trata de entender para que sirve cada evento y usa este artículo como referencia futura de eventos.
Tal como vimos en la anterior parte del tutorial, jQuery nos permite asignar trozos de código que deseamos que se ejecuten a eventos de los elementos de nuestras páginas web. Por ejemplo, el siguiente código hace que se muestre un mensaje cuando el usuario pincha sobre un enlace;
$(document).ready(function(){
$("a").click(function(event){
alert("Este mensaje se muestra cuando el usuario pincha en el enlace");
event.preventDefault();
});
});
La primera línea es la que establece que el código se ejecute cuando el DOM está listo, así evitamos que el código se ejecute cuando los elementos todavía no están cargados. La segunda línea se encarga de asociar a todos los enlaces que hayan en la página el evento onclick, de forma que cuando el usuario pinche sobre el enlace se ejecute el código que hay en la función asociada. Por último, hemos utilizado el “event.preventDefault()” para evitar que tras mostrarse el mensaje, el navegador se redirija hacia la dirección que pueda tener el enlace asignada, es decir, preventDefault hará que tras ejecutarse el código, no pase nada mas.
El trabajo básico con eventos es siempre el mismo;
- Seleccionamos el elemento en el que deseamos asociar la función del evento.
- Asociamos el evento que queremos controlar a dicho elementos.
- Escribimos la función que se ejecutará cuando se lance en evento.
Pero antes de pasar a ver los eventos más comunes, vamos a ver el objeto Event y los atributos que tenemos disponibles al trabajar con eventos.
El objeto Event
El objeto Event es pasado a todos los eventos que se lanzan y pone a nuestra disposición una serie de atributos muy útiles a la hora de trabajar con eventos. Vamos a ver algunos de estos atributos,
event.currentTarget
Devuelte 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 hayamos podido pasar al evento cuando se asocia con bind (esto lo veremos luego)
event.isDefaultPrevented()
Devuelve si se ha lanzado el método preventDefault() o no.
event.isImmediatePropagationStopped()
Devuelve si el método stopImmediatePropagation() se ha llamado, o no, en este objeto.
event.isPropagationStopped()
Devuelve si el método stopPropagation() ha sido llamado.
event.pageX
Devuelve la posición relativa del ratón en relación a la esquina izquierda del documento. Esta propiedad es muy útil cuando trabajamos con efectos.
event.pageY
Devuelve la posición relativa del ratón con respecto a la esquina superior del documento.
event.preventDefault()
Si llamamos a este método dentro de un evento, la acción predeterminada que se ejecutaría por este evento nunca será ejecutada.
event.stopImmediatePropagation()
Previene que se ejecuten otras acciones que pudieran estar asociadas al evento.
event.stopPropagation()
Previene que se ejecute cualquier evento que pudiera estar asociado a los padre del elemento dentro del árbol DOM.
event.target
Es el elemento DOM que inició el evento
event.timeStamp
Número en milisegundos desde el 1 de enero de 1970, desde que el evento fue lanzado. Esto podría ayudarnos para realizar pruebas de rendimiento de nuestros scripts.
event.which
Para eventos de teclado y ratón, este atributo indica el botón o la tecla que ha sido pulsada.
Eventos
A continuación vamos a ir viendo los eventos más comunes, y junto con cada evento vamos a poner una pequeña explicación y ejemplos de código para hacerlo más sencillo. Para un listado completo y descripción de todos los eventos, lo mejor es visitar la documentación de jQuery.
.bind()
Este método es uno de los principales de jQuery. Básicamente nos permite asociar funciones a eventos de elementos tanto del DOM como del navegador. Es la forma extendida de hacer lo que hemos hecho antes. Por ejemplo, el siguiente código hace lo mismo que el primer ejemplo de este tutorial,
$(document).ready(function(){
$("a").bind(“click”, function(event){
alert("Este mensaje se muestra cuando el usuario pincha en el enlace");
event.preventDefault();
});
});
¿Qué ventaja puede tener usar bind en lugar de la forma abreviada? Pues básicamente que es mucho más potente. Usando bind podemos, desde asociar varios eventos simultáneamente, hasta pasar parámetros a eventos o incluso inventar nuestros propios eventos que lanzaremos cuando sea necesario.
Asociando múltiples eventos
El siguiente código asocia varios a varios eventos el mismo código,
$('#foo').bind('mouseenter mouseleave', function() {
alert('El ratón ha entrado o salido del elemento "foo."');
});
Otra forma de asociar varios eventos simultáneamente sería,
$('#foo').bind({
click: function() {
// Hacer algo en el click
},
mouseenter: function() {
// Hacer algo en el mouseenter
}
});
Esta última es una forma bastante común de trabajar.
Si pasamos el objeto event a la función, podremos acceder a todos los atributos de este elemento. Lo que hemos visto en el apartado anterior. El método bind nos permite además pasar parámetros a la función que se va a ejecutar. Por ejemplo,
var message = 'Hola';
$('#hola').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});
message = 'Adios';
$('#adios').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});
Cuando hagamos click en el elemento “#hola” aparecerá un mensaje “Hola”. Y cuando pinchemos en el elemento “#adios” obtendremos un mensaje “Adios”.
Puede parecer que esto no tiene demasiado sentido, pero tiene mucho. Si en lugar de pasar los parámetros para utilizarlos luego en la función hubiéramos usado directamente la variable “message”, el resultado sería que en los dos mensajes aparecería el texto “Adios”. La razón de esto es que cuando se crea el código que se va a ejecutar, no se guarda el estado de las variables actuales, sino que se usa el estado de las variables que hay en el momento exacto de ejecutar el código.
Eventos personalizados
El método bind permite hasta crear tus propios eventos, por ejemplo,
$("#miElemento").bind("miEvento", function(e, miNombre, miValor){
alert(“Hola ” + miNombre);
});
$("#boton").click(function () {
$("#miElemento").trigger("miEvento", [ "Juan Carlos" ]);
});
Esto provocaría que cuando un usuario pinche sobre el botón #boton, se lance el evento que he creado exclusivamente para el elemento #miElemento.
.blur()
El evento blur se lanza sobre un elemento que acaba de perder el foco. Normalmente este evento es aplicable a inputs de formularios.
Podríamos utilizar el evento blur para comprobar que un usuario a introducido correctamente los datos de un campo del formulario. Para hacerlo, el código sería similar a este,
$('#campo1').blur(function() {
// Aquí hay que comprobar si el valor introducido en el campo1 es correcto
});
.click()
Es el evento que se lanza cuando pinchamos sobre el elemento que hemos asociado el evento. Esto ya lo hemos visto en varios ejemplos, pero pongo otro ejemplo para que quede bien claro,
$('#boton').click(function() {
alert('Has pinchado en el botón!');
});
Podríamos simular que se ha lanzado el evento haciendo
$(“#boton”).click()
.dblclick()
Exactamente igual que el evento anterior, pero se lanza cuando hay un doble click sobre el elemento.
.focus()
Este evento se lanza cuando un elemento recibe el foco. Por ejemplo, cuando pinchamos en un input para comenzar a escribir algo, ese input recibirá el foco y lanzará el evento.
.focusin()
Evento muy parecido al anterior, pero con una sutil diferencia. Este evento permite saber cuando un elemento o cualquiera de sus hijos gana el foto. Por ejemplo, si tenemos el siguiente HTML,
<p><input type="text" />
<input type="password" /></p>
podemos hacer lo siguiente
$("p").focusin(function() {
alert('Focusin lanzado!')
});
Esto provocaría que se muestre un mensaje siempre que pongamos el focus en cualquiera de los dos inputs que están dentro del párrafo. La diferencia con focus, es que si asociamos el evento focus, no se mostraría ningún mensaje a ganar el foco cualquiera de los inputs.
.focusout()
Igual que el evento anterior, pero asociado a la pérdida del foco.
.hover()
El evento hover se lanza cuando el ratón está encima del elemento sobre el que hemos enlazado el evento. Este evento suele se muy usado, por ejemplo, mostrar un texto cuando el usuario pone el ratón sobre una zona, o mostrar unos botones de navegación cuando movemos el ratón sobre una fotografía.
.keydown()
Este evento se lanza siempre que el usuario pulsa una tecla, pero se envía sólo al elemento que tiene el foco en ese momento. Los elementos que pueden tener el foco varían de un navegador a otro, pero los formularios y los elementos que contienen (inputs, texareas, checkboxs...) siempre pueden tener el foco. De modo que estos elementos suelen ser los perfectos candidatos para gestionar este evento.
.keypress()
Es muy similar al anterior evento, pero con sutiles diferencias. En el caso de que pulsemos una tecla y la mantengamos pulsada, el evento keydown sólo se lanza una vez, en cambio keypress se lanzaría una vez cada vez que se escriba el carácter. Del mismo modo, si pulsamos modificadores de teclas, como mayúsculas o control, el evento keydown se lanzaría pero el de keypress no.
.keyup()
El evento keyup se lanza cuando el usuario suelta la tecla que estaba pulsando, y al igual que antes se envía al elemento que tiene el foto, por lo que los elementos que nos pueden tener el foco nunca lo recibirán.
.load()
El evento load se lanza tan pronto el elemento al que hemos asociado el evento ha terminado de cargarse por completo. Este evento puede asociarse a cualquier tipo de elemento que tenga una URL, imágenes, iframes, hojas de estilo o javascripts...
Hay que tener especial cuidado con las imágenes, porque si la imagen la carga desde la caché en ocasiones no lanza el evento de cargado.
Un ejemplo de este evento podría ser;
<img alt="Book" id="book" src="book.png" />
$('#book').load(function() {
// Hace algo cuando termina de cargar la imagen por completo
});
.mousedown()
El evento mousedown es lanzado cuando pinchamos en cualquier elemento. Es similar al evento onclick, la diferencia está en que este evento se lanza en cuando pinchamos, antes de soltar el botón.
.mousemove()
El evento mousemove es enviado a cualquier elemento cuando el ratón está encima del elemento.
.mouseout()
Es enviado a cualquier elemento cuando el ratón deja de estar encima del elemento.
.mouseover()
Es enviado a cualquier elemento del HTML cuando el ratón entra por primera vez en el. Normalmente podemos usar combinaciones de este evento y de anterior para mostrar u ocultar ciertos elementos mientras movemos el ratón.
.mouseup()
Igual que el evento mousedown, pero se lanza al soltar el botón del ratón sobre el elemento que está gestionando el evento.
.one()
Es igual que bind, pero en este caso el evento sólo se ejecuta una vez. Por ejemplo, puede interesarnos que cuando pinchemos un botón se muestre un mensaje, pero que la segunda vez que se pinche ya no se muestre, en ese caso podríamos hacer,
$('#boton').one('click', function() {
alert('Este mensaje se muestra sólo una vez');
});
La primera vez que pinchemos en el botón se mostrará el mensaje y se desvinculará el evento del elemento. La segunda vez que se pincha sobre el botón ya no se muestra.
.resize()
resize se lanza cuando cambiamos el tamaño de la ventana. Este evento sólo se envía al objeto window. Por ejemplo,
$(window).resize(function() {
alert('Has cambiado el tamaño de la ventana');
});
.scroll()
El evento 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”.
Por ejemplo, podemos tener un elemento como el que sigue
<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</div>
Y establecer el siguiente evento que se activaría cuando el usuario mueve el scroll del elemento.
$('#target').scroll(function() {
alert('Se ha movido el scroll');
});
.select()
El evento select se lanza cuando el usuario selecciona un texto del elemento sobre el que se gestiona el evento. Este evento sólo se aplica a los textarea y a los input de tipo texto.
.submit()
Este evento se lanza cuando un usuario está tratando de enviar un formulario. Este evento sólo es válido para formularios.
Dependiendo del navegador es posible enviar el formulario sin necesidad de pinchar en un botón, simplemente pulsando la tecla ENTER. Cuando esto sucede el evento no se lanza, por lo que tenemos que prestar especial atención a este comportamiento para gestionarlo en su correspondiente evento “keypressed”.
.toggle()
El evento toggle se utiliza para generar comportamientos de cambio de estado generados al pinchar sobre un elemento. Por ejemplo, puede interesarnos que al pinchar sobre un elemento se visualice y que al volver a pinchar se oculte. Toggle nos permite hacer esto asociando dos o más funciones al mismo evento que se van ejecutando de forma secuencial.
Por ejemplo, tenemos el siguiente elemento
<div id="target">
Click here
</div>
Podemos hacer lo siguiente,
$('#target').toggle(function() {
alert('Primer click');
}, function() {
alert('Segundo click');
}, function() {
alert('tercer click');
});
Si comenzamos a pinchar repetidas veces sobre el elemento #target, generará la siguiente secuencia de alerts...
Primer click Segundo click Tercer click Primero click Segundo click ….
Realmente este comportamiento es muy útil ya que las funciones de cambio de estado son muy comunes en comportamiento dentro de una web. Desde mostrar u ocultar elementos, hasta modificar el comportamiento de una tabla cambiando el orden de los elementos al pinchar en el nombre de la columna.
.unbind()
Unbind permite desenlazar un evento del elemento que deseemos. Esto puede ayudarnos a dejar de ejecutar cierto evento en ciertos casos. Por ejemplo, imagina que tienes una galería de fotos, y que sólo cuando las imágenes están es tamaño pequeño se pueda pinchar sobre ellas, lo que podríamos hacer es enlazar un evento para el caso de que cuando las imágenes se ven pequeñas se pueda pinchar sobre ellas y que cuando las imágenes se vean grandes quitar ese evento.
En el siguiente ejemplo de código se ve mejor,
var funcion = function() {
alert('Mensaje cuando pinchas');
};
Si queremos enlazar la función anterior a un evento onclick de un elemento, podemos hacer,
$('#foo').bind('click', funcion);
Lo que provocaría que cuando se pinche sobre el elemento #foo, se muestre el alert.
Y si ahora quisiéramos dejar de ejecutar el evento anterior al seguir pinchando podemos hacer,
$('#foo').unbind('click', funcion);
.unload()
El evento unload se lanza cuando 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.
Conclusión
Y ahora si, llegados a este punto ya estamos en disposición de comenzar a programar con jQuery. Los conocimientos de selección de elementos y de eventos de jQuery son la base para poder realizar luego cualquier cosa.
En la siguiente parte del tutorial veremos el trabajo con CSS y los efectos de jQuery. A la vez que vamos viendo toda la parte teórica iremos programando nuestro propio lightBox para poner en práctica los conocimientos.
