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

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

jQuery (IX)

Información del evento

El objeto event

Recordemos que al producirse un evento en javascript, podiamos crear un objeto asociado, el cual nos daba información sobre el evento, este era el objeto "event": supongamos que el evento nos dirige a una funcion: function accion(); el evento lo obteníamos mediante :

function accion(elEvento) {
evento = elEvento || window.event;
/*continua el código */ }

mediante el objeto "event" (evento), podemos acceder a la posición del ratón, o a saber qué tecla se ha pulsado. En jQuery obtenemos el objeto "event" de una forma sencilla, basta con pasarle un argumento a la función que gestiona el evento (normalmente la función anónima):

$("#capa1").click(function(evento){
//código a ejecutar tras el evento (objeto"event" = evento)
});

En el argumento que pasamos (variable evento) obtenemos el objeto "event", el cual podemos utilizar, mediante una serie de propiedades, para obtener información sobre el evento.

Información de eventos del ratón

La información más común que normalmente queremos saber sobre los eventos creados con el ratón, suele ser la de su posición (posición del puntero) en la página.

El objeto "event" que utiliza jQuery es el mismo que el de javascript, por lo que tendrá las mismas propiedades que éste, recordemos cuales son:

docX=evento.pageX;

docY=evento.pageY;

Esto nos dará las coordenadas del ratón respecto del punto superior izquierdo del documento.

venX=evento.clientX;

venY=evento.clientY;

Esto nos dará las coordenadas del ratón respecto del punto superior izquierdo de la ventana del navegador.

scrX=evento.screenX;

scrY=evento.screenY;

Esto nos dará las coordenadas del ratón respecto del borde superior izquierdo de la pantalla.

En el recuadro de la derecha (arriba), hemos recogido la posición del ratón respecto del documento. El código empleado es el siguiente (dentro de la estructura "document ready"):

$(document).mousemove(function(ev){
   posx=ev.pageX;
   posy=ev.pageY;
   texto1="<p>Ratón en: "+posx+", "+posy+"</p>";
   $("#r1").html(texto1);
});

Otra información que podemos obtener mediante el objeto "event" es saber cual es el botón que se ha pulsado con el ratón. para ello se utiliza la propiedad button del evento.

pulsado=evento.button;

Al ser estas las mismas propiedades que se usan con javascript, podemos verlas también el el manual javascript:6.3. Eventos del ratón

Información de eventos de teclado

La información más comun sobre eventos de teclado es saber cuál es la tecla que se ha pulsado. Para ello el objeto "event" tiene también algunas propiedades:

En nuestro manual de javascript 6.4. Eventos del teclado se indican las propiedades del objeto "event" para obtener información del teclado.

Si echamos un vistazo a esta página vemos que se utilizan las propiedades .keyCode y charCode, las cuales pueden tener distinto valor según el navegador que usemos.

Aunque podemos usar también estas propiedades con el objeto "event" de jQuery, tenemos también la propiedad .which que puede facilitarnos mucho las cosas:

num=evento.which;

Esta propiedad devuelve el número de tecla, o el número de caracter, según el evento que utilicemos.

• Con keydown devuelve el número de tecla.

• Con keypress devuelve el número de caracter.

• Con keyup devuelve el número de tecla.

Recordemos que cada tecla tiene asignado un número, el número de tecla es independiente del caracter que se pueda escribir con ella. El número de caracter es un número asignado al caracter que se escribe con la tecla, por lo que una tecla puede tener varios números de carácter, dependiendo si se escribe en minúsculas, mayúsculas, o pulsando a la vez "AltGr".

Para obtener el caracter perteneciente a cada tecla, recordemos que en javascript podemos utilizar el siguiente código:

letra=String.fromCharCode(num);

En donde "num" es el número de carácter, y en la variable "letra" obtendremos en un "string" el caracter que le corresponde.

Hemos hecho un pequeño ejercicio, en el cual sacamos la información de la tecla pulsada en pantalla. Podemos verlo aquí a la derecha. El código empleado para los eventos es el siguiente:

$(document).keydown(function(ev){
   nTecla=ev.which;
	 $("#te1").html("Nº Tecla : "+nTecla);
}); 
$(document).keypress(function(ev){
   nCaracter=ev.which;
	 $("#te2").html("Nº Caracter : "+nCaracter);
	 caracter=String.fromCharCode(nCaracter)
	 $("#te3").html("Caracter : "+caracter);
});

Definir eventos

métodos .bind() y .unbind()

En jQuery tenemos también un método que nos permite definir un evento. Es el método .bind() :

$("#capa1").bind("click",function() { .... });

En principio puede parecer más complicado, ya que esto es lo mismo que si ponemos:

$("#capa1").click(function() { .... });

Sin embargo la ventaja de utilizar el método bind, es que en un momento dado podemos desactivar el evento mediante el método .unbind().

$("#capa1").unbind("click")

Con esta línea anulamos el efecto del evento "click" sobre el elemento indicado. Podemos, por tanto activar o desactivar un evento, utilizando "bind" y "unbind".

En el método unbind pasamos como argumento el nombre del evento a desactivar, pero si no le pasamos ningún parámetro se desactivarán todos los eventos que tenga asociado el selector indicado:

$("#capa1").unbind()

Este código desactiva todos los eventos asociados al elemento id="capa1".

Además en el metodo .bind() podemos incluir varios eventos, los cuales se asocian todos a la función indicada.

$("#capa1").bind("mouseenter mouseleave",function() { .... });

método .live()

El método .live() se utiliza exactamente igual que el método .bind(). La diferencia es que con .live() el evento afecta también a los elementos que puedan ser definidos en un futuro, es decir después de haberse definido el evento.

por ejemplo tenemos el siguiente código:

$(".clase1").live("click",function() {
$(this).css("color","red");
});

Con este código todos los elementos de la "clase1" cambian su color de texto a rojo al hacer click sobre ellos.

Si después de definir este evento, añadimos mas elementos de la clase 1 (por ejemplo mediante otros eventos), estos elementos también estarán asociados a este evento, y al hacer click sobre ellos tambien cambiarán el color de texto a rojo, cosa que no ocurriría si no usaramos el método .live().

Otra de las ventajas de utilizar jQuery es la facilidad con la que podemos utilizar la tecnica de AJAX, veremos esto en la siguiente página.

utilizar Ajax

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