Videotutorial: manejo de eventos al detalle en jQuery

  • Por
Más vídeos sobre el tratamiento de eventos en jQuery, explicaciones y ejemplos sobre eventos de ratón, eventos de teclado, etc.
Estamos avanzando en nuestro aprendizaje con jQuery y hemos decidido detenernos un poco más en los eventos, dado que son la base para la definición de la interacción con el usuario. El framework Javascript jQuery tiene diversos tratamientos avanzados de eventos que debemos conocer todavía.

Partimos de la base que has visto los anteriores videotutoriales de jQuery, en los que hemos tratado diversos usos más básicos y que debes conocer de antemano. Sobre todo, será muy importante que hayas visto la introducción a los eventos en jQuery.

En esta entrega ofrecemos una nueva serie de vídeos que explicarán el tratamiento de eventos de ratón, el tratamiento de eventos de teclado y distintas formas adicionales de definir y lidiar con eventos. Como todo vídeo, abordamos las explicaciones desde un punto de vista práctico y veremos varios ejemplos que nos ilustrarán el uso de jQuery. No obstante, todavía son temas bastante básicos sobre el framework que necesitamos conocer para tener la base suficiente como para poder hacer cosas más interesantes en un futuro próximo.

En este videotutorial vamos a presentar tres vídeos de aproximadamente 10 minutos cada uno.

Vídeo 1: Eventos de ratón

Definición de eventos que tienen que ver con el ratón, es decir, el movimiento del ratón, click, etc. Explicamos cómo obtener datos del objeto evento y hacer cosas con la información sobre el puntero del ratón, osea, las coordenadas de su posición en la página. Haremos un par de ejemplos interesantes, por ejemplo en uno de ellos haremos que una capa de la página acompañe el movimiento del ratón.

Videotutorial 2: Eventos de teclado

Cómo trabajar con los eventos de teclado, relacionados con la pulsación de teclas. Cómo averiguar cosas como la tecla que se ha pulsado y hacer cosas dependiendo de ello. En un ejemplo mostraremos cómo mover una capa por la página utilizando las teclas del cursor (flechas del teclado).

Vídeo 3: Más sobre eventos

Aprendemos a definir eventos con bind(), que permite cosas como definir manejadores para varios tipos de eventos a la vez. Aprendemos también a desactivar manejadores de eventos de un tipo de evento determinado con unbind(). Luego examinamos varios ejemplos de interés con propiedades del objeto evento que nos ofrecen datos tan útiles como saber qué elemento está relacionado con un evento.

Esperamos que todas estas explicaciones nos sirvan para conocer un poco mejor los eventos en jQuery y cómo trabajar con ellos de una manera sencilla. Recordar que en el Manual de jQuery y los talleres de jQuery que venimos publicando en DesarrolloWeb.com, encontraréis muchas otras explicaciones de gran utilidad para conocer muchas otras cosas de los eventos en este framework Javascript.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

PakoDiaz

12/8/2011
language="javascript" deprecado
observe algo que me llamo la antención. el atributo language="javascript" del tag script esta deprecado, se debe de usar type="text/javascript" en su lugar.., de igual sere un puritano.. pero en el <script> donde se agerga jQuery.. le falta el type.....

Yannick

17/12/2011
Consulta sobre el tutorial
Hola
He estado siguiendo tus vídeos y leyendo toda la información que dejas en los enlaces, hasta aquí he logrado que todo acabe funcionando, alguna vez he tenido que revisar el código hasta que funcione.
Estaba siguiendo el primer vídeo, y he conseguido que se muestren las coordenadas dentro del div en forma de texto, pero cuando he llegado a la parte en la que el div sigue al raton no me funciona el código. El div se queda en su sitio sin moverse. Viendo que no funciona he pensado que el error tendría que estar en esta parte

$("#micapa").css({
top: e.pageY,
left: e.pageX
})

ya que para mostrar las coordenadas si que funcionaba. He estado cerca de una hora revisando el código y no encuentro el error, estoy usando una versión mas nueva, he intentado seguir el videotutorial, pero al final no se mostraba el div siguiendo el stilo css: display:none y no funcionaba dinamicamente, no entiendo donde esta el error, te envío todo el código para que tengas toda la información:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Eventos de raton</title>
<script src="jquery-1.7.1.min.js" type="javascript"></script>
<script language="javascript">

$(document).ready(function(){
$(document).mousemove(function(e){
//$("#micapa").text(e.pageX + " / " + e.pageY);
$("#micapa").css({
top: e.pageY,
left: e.pageX
})

})
})


</script>
</head>

<body>
<div style="width:150px; background-color:#ff8800; padding:10px; position:absolute;" id="micapa">
Esta es una capa!!
</div>
</body>
</html>

Me puedes ayudar. Tienes mi correo electrónico.

Gracias por avanzado.

Yannick

18/12/2011
No encuentro los archivos de practicas
Hola en el primer videotutorial dices que hay el mismo tutorial explicado con texto. El caso es que no lo encuentro en el manual, y el taller no lo logro encontrar.
Me gustaría disponer el archivo original por que me gustaría pasar esos archivos por un comparador de archivos con los que tengo, ya que he solventado el error de el comentario que envié ayer, probando varias cosas.

El caso es que pasé el archivo que funciona con el que puse ayer en el comentario por el comparador y el problema era que es que en la linea:<script src="jquery-1.7.1.min.js" type="javascript"></script> hay que poner <script src="jquery-1.7.1.min.js" type="text/javascript"></script> tal como pone en el comentario que luego leí, el caso es que los archivos de los siguientes tutoriales hasta el de "Videotutorial: Ajax en jQuery " (he seguido los videos hasta ese videotutorial) no me funcionan, parece que no quiere leer el jQuery o no quiere interpretar el codigo que pones en el head.

En el otro comentario comentan que hay que poner el type en <script language="javascript"> ¿es posible que no funcione por eso? he probado con type="text/javascript" y nada, no entiendo como todo igual hasta el $(document).ready(function(){ y los documentos no funcionen, he mirado y diria que estan igual que en el tutorial, el caso es que por eso creo que estaria bien acceder al codigo que hay en los vídeos para poder comparar mis archivos con los del video y ver que es lo que falla por que yo no encuentro el error.

Gracias por adelantado

Maider_atxe

05/6/2012
El DIV no se mueve con el ratón
Hola, tengo el mismo problema que Yannick. Cuando escribo el código para que el DIV aparezca en la posición en la que se encuentra el ratón no lo hace. He revisado el código muchas veces y no encuentro donde puede estar el fallo. Tampoco me da ningún error, así que no sé qué puede ser. Agradecería mucho la ayuda. Gracias.