Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de jQuery

Programar en javascript puede ser más fácil sabiendo utilizar jQuery

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.



jQuery (VIII)

Eventos

Introducción

Recordemos que los eventos en javascript son aquellas instrucciones que permiten variar el estado de la página mediante una acción. Esta acción puede venir por parte del usuario o llevarse a cabo en un cierto momento por estar así indicada. En javascript los eventos son instrucciones que podemos poner tanto en el lenguaje HTML (como atributos) como en el código javascript.

Los eventos, en javascript, se escriben todos con el prefijo "on", (onclick, onblur, onmouseout, onkeypress, etc). Cada evento indica algo que ocurre en algun elemento de la página (o en todo el documento). El evento registra un cambio en la página, y pone en marcha un mecanismo para introducir un código.

métodos jQuery para eventos

JQuery tiene también sus métodos para detectar los eventos. Estos se incluyen siempre en el lenguaje javascript. La mayoría de estos métodos se escriben igual que en javascript, pero sin el prefijo "on", por ejemplo onclick se convierte en .click()

Por supuesto podemos seguir utilizando los atributos javascript en el html, y mandar las acciones a ejecutar a una función:

<p id="p1" onclick="cambiar()">Pulsa para cambiar</p>

El método es el mismo que el utilizado sin jQuery. La diferencia es que ahora, dentro de la función del evento (function cambiar()..) podemos utilizar código jQuery.

Sin embargo podemos crear el evento desde el mismo código javascript-jQuery, utilizando las funciones de evento, por ejemplo, si tenemos un elemento html como el siguiente:

<p id="p1">Pulsa para cambiar</p>

En el código con jQuery (dentro del "document ready"), escribimos lo siguiente:

$("#p1").click(cambiar);

Esto crea un evento "onclick" asociado al elemento html, el código asociado al evento (la funcion "cambiar", debemos escribirlo dentro del paréntesis (Escribimos el nombre de la funcion sin parentesis, "cambiar", ya que si escribieramos "cambiar()" -con paréntesis- estaríamos llamando al valor de retorno de la función). Esto nos obliga también a crear una función "cambiar()" aparte, en la que escribir el código de lo que sucede al desencadenarse el evento.

Esta solución, aunque válida, no es la más adecuada, ya que obliga a crear otra función, con lo que se complica el código. La solución más adecuada (y la más utilizada), es crear una función anónima dentro del paréntesis, en la cual indicamos el código asociado al evento:

$("#p1").click(function(){
//Aquí va el código asociado al evento
});

Hemos visto ejemplos de esto en páginas anteriores con el método .click(), por lo que creo que no tiene mayor dificultad usarlo con otros eventos.

Métodos de eventos más utilizados.

Aunque los eventos que se usan con jQuery son en su mayoría los mismos que los usados en javascript, puede haber algunas diferencias. Aquí vamos a poner los eventos más usados. Vamos a poner un ejemplo de cada uno de ellos. Podemos ver su funcionamiento en el recuadro de la derecha.

Eventos del ratón

.click() : pulsar una vez el ratón sobre un elemento:

$("#click").click(function() {
alert("click simple");
});

.dblclick() : pulsar el ratón dos veces seguidas sobre un elemento:

$("#dblclick").dblclick(function() {
alert("doble click");
});

.mouseenter() : El ratón se sitúa encima de un elemento:

$("#mouse1").mouseenter(function() {
$(this).css("color","red");
});

.mouseleave() : El ratón, que estaba situado encima de un elemento, sale de él:

$("#mouse1").mouseleave(function() {
$(this).css("color","blue");
});

.hover() : Este evento es una combinación de los dos anteriores, detecta la posición del raton, y se produce tanto cuando éste se coloca encima del elemento, como cuando sale de él. Admite dos funciones, que las escribiremos separadas por una coma, La primera de ellas se produce cuando el ratón entra, y la segunda cuando sale:

$("#hover").hover(function() {
$(this).css("color","red");
},
function() {
$(this).css("color","blue");
});

.mousedown() : Momento en que presiona el botón, independientemente de si se suelta o no, vale tanto para el botón izquierdo como para el derecho.

$("#pulsaRaton").mousedown(function() {
$(this).html("<b>mousedown</b>, mouseup: pulsado")
});

.mouseup() : soltar un botón del ratón después de hacer click. El evento se produce sólo en el momento de soltar el botón.

$("#pulsaRaton").mouseup(function() {
$(this).html("mousedown, <b>mouseup</b>: sin pulsar")
});

.mousemove() : El evento se produce al mover el ratón sobre un elemento.

n1=0;
$("#capa2").mousemove(function(){
n1++;
$("#mousemove").html("mousemove: "+n1+" movimientos");
});

.mouseover() : El evento se produce al situarse el ratón sobre un elemento. El evento puede producirse varias veces mientras está encima del elemento.

n2=0;
$("#capa2").mouseover(function(){
n2++;
$("#mouseover").html("mouseover: "+n2+" veces");
});

.toggle() : El evento se produce al hacer click con el ratón. Tiene la particularidad de que admite varias funciones, que se van alternando en su ejecución cuando el usuario realiza clicks.

$("#toggle").toggle(function() {
$(this).css("color","red");
},
function() {
$(this).css("color","blue");
},
function() {
$(this).css("color","green");
});

Eventos del teclado

.keydown() : El evento se produce en el momento que se presiona una tecla, 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() : Se produce al tener pulsada una tecla, Si se mantiene pulsada, el evento se produce varias veces, de la misma manera que se escriben varios caracteres al mantenerla pulsada. Se corresponde con el hecho de tener la tecla pulsada.

.keyup() : El evento se produce en el momento de dejar de presionar una tecla que teníamos pulsada.

Los eventos de teclado se suelen aplicar al documento (document), y no a un elemento concreto. veamos el código del ejemplo del cuadro de la derecha:

$(document).keydown(function(){
$("#teclado").html("tecla pulsada");
});
$(document).keyup(function(){
$("#teclado").html("tecla sin pulsar");
});

Eventos combinados teclado-ratón

Son los eventos que controlan el "foco" o elemento seleccionado. Podemos llevar el foco a un elemento mediante el ratón (haciendole click), o mediante el teclado (tabulador o inter). En una página los elementos que admiten tener el foco suelen ser los elementos de formulario.

.focusin() : El elemento adquiere el foco de la aplicación.

.focusout() : El elemento pierde el foco de la aplicación.

.focus() : El elemento tiene el foco de la aplicación. igual que el evento "onfocus" de javascript.

---

Seguimos con los eventos en la proxima página. Veremos el objeto "event" que proporciona información del evento.

Información del evento.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com