Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/eventos»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con «{{Usuario:ManuelRomero/JavaScript/jquery/nav}} <br />»)
 
 
Línea 1: Línea 1:
 
{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
 
{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
 
<br />
 
<br />
 +
===Eventos===
 +
*Ya sabemos lo que son los eventos (acciones que ocurren sobre los objetos)
 +
*JQuery está preparado para interactuar con los eventos que ocurren sobre los objetos de nuestro dom
 +
*Vamos a exponer los principales eventos agrupándolos según el objeto que los origina
 +
#Eventos de Ratón
 +
#Eventos de Teclado
 +
#Eventos de formulario
 +
#Eventos de la ventana o documento
 +
 +
=== Como funcionan los eventos en jQuery ===
 +
*Tomemos el siguiente Ejemplo
 +
<source lang="javascript">
 +
$("button").click(function(miEvento){
 +
  miEvento.preventDefault();
 +
  alert("Has hecho clic en esta ancla. Como he hecho preventDefault, no te llevaré al href");
 +
});
 +
</source>
 +
*El evento se define sobre todos los objetos seleccionados mediante el selector jQuery
 +
:En el caso anterior sobre todas las '''anclas''' '''''<a....>''''' del documento
 +
 +
*El tipo de evento lo definimos con la función '''''click''''' en este caso. Luego veremos una lista de eventos disponibles.
 +
*El evento recibe una función anónima como parámetro donde indicamos todas las acciones que queremos que se ejecuten cuando ocurra el evento.
 +
*Esta función anónima puede recibir como parámetro el objeto evento que se ha generado cuando ha ocurrido el evento
 +
[[Imagen:eventoJQuery.png]]
 +
 +
<div class="slide">
 +
 +
*La función manejadora del evento tiene a su vez un parámetro ''miEvento'' que nos permite utilizar las propiedades o métodos del evento en cuestión.
 +
: En este caso utilizaremos el método ''preventDefault()'' 
 +
 +
 +
</div>
 +
==Lista de eventos==
 +
===Eventos del rató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.
 +
:Se generarán también dos eventos click()
 +
</div>
 +
<div class="slide">
 +
;mousedown()
 +
:Para generar un evento cuando el usuario hace clic independientemente de si lo suelta o no.
 +
:Sirve tanto para el botón derecho como el izquierdo del ratón.
 +
:Útil para drag&drop
 +
<source lang="javascript">
 +
$("#p").mousedown(function (b) {
 +
    alert(b.which);
 +
    //b puede ser 1, 2 o 3 (botón izquierdo, central o derecho)
 +
});
 +
</source>
 +
 +
;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.
 +
;mousemove()
 +
:Evento que se produce al mover el ratón sobre un elemento de la página.
 +
<source lang="javascript">
 +
$("#contendedor").mousemove(function (c) {
 +
        $(this).html("El ratón se está moviendo. Las coordenadas son " + c.pageX + ", " + c.pageY);
 +
    });
 +
</source>
 +
 +
<div class="slide">
 +
;mouseover() y mouseout()
 +
:Sirve para lo mismo que los eventos mouseover y mouseout de Javascript. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que pueden producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido (por los elementos anidados).
 +
;mouseenter() y mouseleave()
 +
:Normalmente preferiremos estos eventos respecto a los originales de javascript ya que se ejecutarán sólo una vez.
 +
 +
</div>
 +
<div class="slide">
 +
 +
;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.
 +
:A menudo utilizaremos este evento mejor en vez de mouseenter() y mouseleave().
 +
<source lang="javascript">
 +
.hover(function() {
 +
    //Escribmos el código a ejecutar cuando el ratón se poner sobre el objeto
 +
  }, function() {
 +
    //Escribmos el código a ejecutar cuando el ratón sale del objeto});
 +
//Ejemplo:
 +
$("#p").hover(function () {
 +
    $(this).css("background-color", "blue");
 +
  }, function () {
 +
    $(this).css("background-color", "white");
 +
});
 +
</source>
 +
 +
</div>
 +
<div class="slide">
 +
 +
;toggle()
 +
:Esta función va a permitir alternar comportamientos sobre los objetos
 +
:Por defecto, sin parámetros nos va a permitir ocultar o mostrar elementos de nuestro dom (Si están visibles los oculta, si están ocultos los visualiza.
 +
En este caso le podemos pasar parámetros para indicar por ejemplo la velocidad de visualización (slow, fast o milisegundos)
 +
{{Actividad|
 +
Title=Mostrando y ocultando con toggle
 +
|
 +
*Haz un programa que tengamos tres botones para mostrar/ocultar una imagen
 +
*Usamos la función toggle (Si usamos esta función ya no tenemos que usar el evento click)
 +
<source lang=html5>
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>Document</title>
 +
    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 +
    <script type="text/javascript">
 +
$(document).ready(function(){
 +
              //Escribe aquí el código
 +
        });
 +
    </script>
 +
 +
</head>
 +
<body>
 +
    <p> Probando cosas</p>
 +
    <button id="rapido">Rápido</button>
 +
    <button id="lento">Lento</button>
 +
    <button id="5s">5 segundos</button>
 +
    <br />
 +
    <img src="naturaleza.jpg" alt="">
 +
</body>
 +
</html>
 +
</source>
 +
}}
 +
[[Usuario:ManuelRomero/JavaScript/jquery/solucion1 |<font size=5 color=red >Solución</font>]]
 +
 +
:Sirve para indicar dos o más funciones para ejecutar cuando el usuario realiza cliks, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.
 +
:También podemos usar este método para alternar la  ejecución de varias funciones alternándose
 +
<source lang="javascript">
 +
$("#p").toggle(function () {
 +
  $(this).css("background-color", "blue");
 +
  }, function () {
 +
    $(this).css("background-color", "red");
 +
  }, function () {
 +
    $(this).css("background-color", "yellow");
 +
});
 +
</source>
 +
</div>
 +
<div class="slide">
 +
 +
===Eventos relacionados con el teclado===
 +
*Primero se ejecuta uno o varios eventos keydown(), en función de si se mantiene o no la tecla pulsada. Luego uno o varios eventos keypress() y luego un único evento keyup().
 +
;keydown()
 +
:Se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presión o se mantiene.
 +
:Funciona con todas las teclas.
 +
 +
</div>
 +
<div class="slide">
 +
 +
;keyup()
 +
:Se ejecuta en el momento de liberar una tecla.
 +
:Funciona con todas las teclas.
 +
*keypress()
 +
:Se ejecuta como respuesta a una pulsación e inmediata liberación de la tecla.
 +
:No se dispara con las teclas ALT, MAYS, CTRL.
 +
 +
</div>
 +
<div class="slide">
 +
 +
*Los navegadores almacenan de forma diferente las teclas pulsadas. La propiedad which del evento nos permitirá trabajar sin preocuparnos de ello.
 +
*Ejemplo:
 +
 +
<source lang="html4strict">
 +
<html>
 +
  <head>
 +
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
 +
    <script type="text/javascript">
 +
      $(document).ready(function () {
 +
$("#keypress").keyup(function (key) {
 +
  alert(key.which);
 +
});
 +
      });
 +
    </script>
 +
  </head>
 +
  <body>
 +
    <p>Key Up Test: <input type="text" name="keypress" id="keypress" /></p>
 +
  </body>
 +
</html>
 +
</source>
 +
</div>
 +
<div class="slide">

Última revisión de 21:26 6 abr 2016



Eventos

  • Ya sabemos lo que son los eventos (acciones que ocurren sobre los objetos)
  • JQuery está preparado para interactuar con los eventos que ocurren sobre los objetos de nuestro dom
  • Vamos a exponer los principales eventos agrupándolos según el objeto que los origina
  1. Eventos de Ratón
  2. Eventos de Teclado
  3. Eventos de formulario
  4. Eventos de la ventana o documento

Como funcionan los eventos en jQuery

  • Tomemos el siguiente Ejemplo 
$("button").click(function(miEvento){
   miEvento.preventDefault();
   alert("Has hecho clic en esta ancla. Como he hecho preventDefault, no te llevaré al href");
});
  • El evento se define sobre todos los objetos seleccionados mediante el selector jQuery
En el caso anterior sobre todas las anclas <a....> del documento
  • El tipo de evento lo definimos con la función click en este caso. Luego veremos una lista de eventos disponibles.
  • El evento recibe una función anónima como parámetro donde indicamos todas las acciones que queremos que se ejecuten cuando ocurra el evento.
  • Esta función anónima puede recibir como parámetro el objeto evento que se ha generado cuando ha ocurrido el evento

EventoJQuery.png

  • La función manejadora del evento tiene a su vez un parámetro miEvento que nos permite utilizar las propiedades o métodos del evento en cuestión.
En este caso utilizaremos el método preventDefault()


Lista de eventos

Eventos del rató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.
Se generarán también dos eventos click()

</div>

mousedown()
Para generar un evento cuando el usuario hace clic independientemente de si lo suelta o no.
Sirve tanto para el botón derecho como el izquierdo del ratón.
Útil para drag&drop 
$("#p").mousedown(function (b) {
    alert(b.which);
    //b puede ser 1, 2 o 3 (botón izquierdo, central o derecho)
});
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.
mousemove()
Evento que se produce al mover el ratón sobre un elemento de la página. 
$("#contendedor").mousemove(function (c) {
        $(this).html("El ratón se está moviendo. Las coordenadas son " + c.pageX + ", " + c.pageY);
    });
mouseover() y mouseout()
Sirve para lo mismo que los eventos mouseover y mouseout de Javascript. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que pueden producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido (por los elementos anidados).
mouseenter() y mouseleave()
Normalmente preferiremos estos eventos respecto a los originales de javascript ya que se ejecutarán sólo una vez.
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.
A menudo utilizaremos este evento mejor en vez de mouseenter() y mouseleave(). 
.hover(function() {
     //Escribmos el código a ejecutar cuando el ratón se poner sobre el objeto
  }, function() {
     //Escribmos el código a ejecutar cuando el ratón sale del objeto});
//Ejemplo:
$("#p").hover(function () {
     $(this).css("background-color", "blue");
  }, function () {
     $(this).css("background-color", "white");
});
toggle()
Esta función va a permitir alternar comportamientos sobre los objetos
Por defecto, sin parámetros nos va a permitir ocultar o mostrar elementos de nuestro dom (Si están visibles los oculta, si están ocultos los visualiza.

En este caso le podemos pasar parámetros para indicar por ejemplo la velocidad de visualización (slow, fast o milisegundos)


Icon activity.jpg

Mostrando y ocultando con toggle

  • Haz un programa que tengamos tres botones para mostrar/ocultar una imagen
  • Usamos la función toggle (Si usamos esta función ya no tenemos que usar el evento click) 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function(){
               //Escribe aquí el código
         });
    </script>
 
</head>
<body>
    <p> Probando cosas</p>
    <button id="rapido">Rápido</button>
    <button id="lento">Lento</button>
    <button id="5s">5 segundos</button>
    <br />
    <img src="naturaleza.jpg" alt="">
</body>
</html>




Solución

Sirve para indicar dos o más funciones para ejecutar cuando el usuario realiza cliks, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.
También podemos usar este método para alternar la ejecución de varias funciones alternándose 
$("#p").toggle(function () {
  $(this).css("background-color", "blue");
  }, function () {
     $(this).css("background-color", "red");
  }, function () {
     $(this).css("background-color", "yellow");
});

Eventos relacionados con el teclado

  • Primero se ejecuta uno o varios eventos keydown(), en función de si se mantiene o no la tecla pulsada. Luego uno o varios eventos keypress() y luego un único evento keyup().
keydown()
Se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presión o se mantiene.
Funciona con todas las teclas.
keyup()
Se ejecuta en el momento de liberar una tecla.
Funciona con todas las teclas.
  • keypress()
Se ejecuta como respuesta a una pulsación e inmediata liberación de la tecla.
No se dispara con las teclas ALT, MAYS, CTRL.
  • Los navegadores almacenan de forma diferente las teclas pulsadas. La propiedad which del evento nos permitirá trabajar sin preocuparnos de ello.
  • Ejemplo: 
<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
	$("#keypress").keyup(function (key) {
	  alert(key.which);
	});
      });
    </script>
  </head>
  <body>
    <p>Key Up Test: <input type="text" name="keypress" id="keypress" /></p>
  </body>
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/eventos&oldid=19284»