eventos. jquery page 2 los eventos son uno de los elementos más importantes en el desarrollo de...
TRANSCRIPT
Eventos
jQuery Page 2
Los eventos son uno de los elementos más importantes en el desarrollo de aplicaciones
web enriquecidas del lado del cliente, puesto que sirven para realizar acciones en la
página a medida que el usuario realiza cosas con la página. Es decir, son la base para
crear la interacción con el usuario.
jQuery Page 3
Con jQuery podemos implementar todos los eventos que existen en Javascript, y alguno un poco más evolucionado, para los que hay una función propia para cada uno.
jQuery Page 4
Eventos Relacionados con el Ratón
Evento Descripción
.click() Sirve para generar un evento cuando se produce un clic en un elemento de la página.
.dblclick() Para generar un evento cuando se produce un doble clic sobre un elemento.
.hover() Esta función en realidad sirve para manejar dos eventos, cuando el ratón entra y sale de encima de un elemento. Por tanto espera recibir dos funciones en vez de una que se envía a la mayoría de los eventos.
.mousedown() Para generar un evento cuando el usuario hace clic, en el momento que presiona el botón e independientemente de si lo suelta o no. Sirve tanto para el botón derecho como el izquierdo del ratón.
.mouseup() Para generar 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.
.mouseenter() Este evento se produce al situar el ratón encima de un elemento de la página.
.mouseleave() Este se desata 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
.mouseout() Este evento sirve para lo mismo que el evento mouseout de JavaScript. Se desata cuando el usuario sale con el ratón de la superficie de un elemento.
.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.
.toggle() Sirve para indicar dos o más funciones para ejecutar cosas cuando el usuario realiza clics, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.
jQuery Page 5
Eventos Relacionados con el Teclado
Evento Descripción
.keydown() Este evento 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() Este evento ocurre cuando se digita un carácter, o se presiona otro tipo de tecla. Es como el evento keypress de Javascript, por lo que se entiende que keypress() 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() El evento keyup se ejecuta en el momento de liberar una tecla, es decir, al dejar de presionar una tecla que teníamos pulsada.
jQuery Page 6
Eventos Combinados
Evento Descripción
.focus() Sirve para definir acciones cuando se produce el evento focus de Javascript, cuando el elemento gana el foco de la aplicación.
.blur() Ocurre cuando el elemento pierde el foco de la aplicación, que puede ocurrir cuando el foco está en ese elemento y pulsamos el tabulador, o nos movemos a otro elemento con el ratón.
.change() Ocurre cuando un elemento cambia su valor, es limitado para elementos input, textarea y select
jQuery Page 7
Eventos Combinados
Evento Descripción
.focus() Sirve para definir acciones cuando se produce el evento focus de Javascript, cuando el elemento gana el foco de la aplicación.
.blur() Ocurre cuando el elemento pierde el foco de la aplicación, que puede ocurrir cuando el foco está en ese elemento y pulsamos el tabulador, o nos movemos a otro elemento con el ratón.
.change() Ocurre cuando un elemento cambia su valor, es limitado para elementos input, textarea y select
jQuery Page 8
Ejemplos<!DOCTYPE html><html><head> <style>
p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; } .blue { color:blue; } .highlight { background:yellow; } </style>
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> $("p").click(function () { $(this).toggleClass("highlight"); }); </script> </head><body> <p class="blue">Click to toggle</p> <p class="blue highlight">highlight</p> <p class="blue">on these</p> <p class="blue">paragraphs</p></body></html>
toggleClass()
Permite conmutar clases, de forma, que si el elemento tiene ya la clase, la elimina y viceversa.
jQuery Page 9
Manejadores de Eventos
jQuery provee métodos para asociar controladores de eventos (en inglés event handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada.
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
jQuery Page 10
Manejadores de EventosLa función controladora de eventos recibe un objeto del evento, el cual contiene varios métodos y propiedades. El objeto es comúnmente utilizado para prevenir la acción predeterminada del evento a través del método preventDefault. Sin embargo, también contiene varias propiedades y métodos útiles:
Método/Propiedad Descripción
pageX, pageY La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
type El tipo de evento (por ejemplo “click”).
which El botón o tecla presionada.
data Alguna información pasada cuando el evento es ejecutado.
target El elemento DOM que inicializó el evento.
preventDefault() Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
jQuery Page 11
Ejemplo<!DOCTYPE html><html><head> <style>
body {background-color: #eef;
}div {
padding: 20px; }
</style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script>
$(document).mousemove(function(e){ $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
}); </script> </head><body> <div id="log"></div></body></html>
jQuery Page 12
.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
$(document).ready(function(){ $("a").bind(“click”, function(event){ alert("Este mensaje se muestra cuando el usuario da click en el enlace"); event.preventDefault(); }); });
preventDefault() permite bloquear el comportamiento por default, en este caso, de los enlaces
jQuery Page 13
.bind()
Usando bind podemos, desde asociar varios eventos simultáneamente
$('#foo').bind({click: function() { // Hacer algo en el click }, mouseenter: function() { // Hacer algo en el mouseenter }
});
jQuery Page 14
Tarea