Diferencia entre revisiones de «Usuario:Juanda/jQuery/Eventos»

De WikiEducator
Saltar a: navegación, buscar
(→‎Eventos relacionados con el ratón)
 
(35 revisiones intermedias por el mismo usuario no mostrado)
Línea 7: Línea 7:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
== Como funcionan los eventos en jQuery ==
+
=== Como funcionan los eventos en jQuery ===
 +
 
 
<source lang="javascript">
 
<source lang="javascript">
 
$(".mienlace").click(function(mievento){
 
$(".mienlace").click(function(mievento){
 
   mievento.preventDefault();
 
   mievento.preventDefault();
−
   alert("Has hecho clicnComo he hecho preventDefault, no te llevaré al href");
+
   alert("Has hecho clic. Como he hecho preventDefault, no te llevaré al href");
 
});
 
});
 
</source>
 
</source>
 
*El evento se define sobre todos los objetos seleccionados mediante el selector jQuery
 
*El evento se define sobre todos los objetos seleccionados mediante el selector jQuery
−
:En este caso todos los elementos con ''class=mienlace''
+
:En este caso todos los elementos con ''class="mienlace"''
 
*El tipo de evento lo definimos con la función click o similares.
 
*El tipo de evento lo definimos con la función click o similares.
 
*El evento define como parámetro una función que será la manejadora del evento.
 
*El evento define como parámetro una función que será la manejadora del evento.
 +
</div>
 +
<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.
 
*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()''   
 
: En este caso utilizaremos el método ''preventDefault()''   
 +
 +
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
 +
 
== Listado de Eventos ==
 
== Listado de Eventos ==
 
</div>
 
</div>
Línea 28: Línea 35:
 
===Eventos relacionados con el ratón===
 
===Eventos relacionados con el ratón===
 
*click()  
 
*click()  
−
:''Sirve para generar un evento cuando se produce un clic en un elemento de la página.''
+
:Sirve para generar un evento cuando se produce un clic en un elemento de la página.
 
*dblclick()  
 
*dblclick()  
−
:''Para generar un evento cuando se produce un doble clic sobre un elemento.''
+
:Para generar un evento cuando se produce un doble clic sobre un elemento.  
−
*hover()  
+
:Se generarán también dos eventos click()
−
:''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.''
+
</div>
 +
<div class="slide">
 
*mousedown()  
 
*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.''
+
: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>
 +
 
 +
</div>
 +
<div class="slide">
 +
 
 
*mouseup()  
 
*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.''
+
:Para generar un evento cuando el usuario ha hecho clic y luego suelta un botón del ratón.  
−
*mouseenter()
+
:El evento mouseup se produce sólo en el momento de soltar el botón.
−
:''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()  
 
*mousemove()  
−
:''Evento que se produce al mover el ratón sobre un elemento de la página.''
+
:Evento que se produce al mover el ratón sobre un elemento de la página.
−
*mouseout()  
+
<source lang="javascript">
−
:''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.''
+
$("#contendedor").mousemove(function (c) {
−
*mouseover()  
+
        $(this).html("El ratón se está moviendo. Las coordenadas son " + c.pageX + ", " + c.pageY);
−
:''Sirve para lo mismo que el evento mouseover de Javascript. 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.''
+
    });
 +
</source>
 +
</div>
 +
<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() {
 +
    Put in mouse enter function here
 +
  }, function() {
 +
    Put in mouse leave function here
 +
});
 +
//Ejemplo:
 +
$("#p").hover(function () {
 +
    $(this).css("background-color", "blue");
 +
  }, function () {
 +
    $(this).css("background-color", "white");
 +
});
 +
</source>
 +
 
 +
</div>
 +
<div class="slide">
 +
 
 
*toggle()  
 
*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.''
+
:Sirve para indicar dos o más funciones para ejecutar cuando el usuario realiza clics, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.
 +
<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>
 
<div class="slide">
 
<div class="slide">
  
−
====Eventos relacionados con el teclado====
+
===Eventos relacionados con el teclado===
−
*Primero se ejecuta un evento keydown(), luego uno o varios eventos keydown() y luego un evento keyup().
+
*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()  
 
*keydown()  
−
: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.
+
: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()  
 
*keyup()  
 
:Se ejecuta en el momento de liberar una tecla.
 
:Se ejecuta en el momento de liberar una tecla.
 +
:Funciona con todas las teclas.
 
*keypress()  
 
*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.
+
: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">
 +
==Asociación de DOM y eventos==
 +
</div>
  
 
<div class="slide">
 
<div class="slide">
 +
===Métodos bind(), live() y delegate() ===
 +
*En la versión de jQuery 1.7 han intentado unificar las APIs de manejo de eventos en los métodos on() y off().
 +
*Estos métodos sustituyen a los antiguos bind(), delegate() y live().
 +
*[http://www.masquewordpress.com/jquery-delegate-vs-live-vs-bind-vs-on/ Información del resto de métodos]
  
−
== Manipulación de css ==
 
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
−
Obtiene la propiedad CSS del primer elemento seleccionado:
 
−
<source lang="javascript">
 
−
//$(selector).css(name)
 
−
$(this).css("background-color");
 
−
</source>
 
  
−
Establece el valor de una propiedad CSS de los elementos seleccionados:
+
===Método on() - Introducción ===
 +
*'''$(elements).on(events [, selector] [, data], handler);'''
 +
*Las funciones para eventos vistas hasta ahora, como click, son atajos a la función on():
 
<source lang="javascript">
 
<source lang="javascript">
−
//$(selector).css(name,value)
+
// Asignar un manejador de eventos usando click
−
$("p").css("background-color","yellow");  
+
$("#header a").click(function() {
 +
    // manejar el evento
 +
});
 +
 +
// Asignar un manejador de eventos usando on
 +
$("#header a").on("click", function() {
 +
    // manejar el evento
 +
});
 
</source>
 
</source>
 +
Estas dos construcciones son equivalentes, pero on() permite hacer muchas más cosas...
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
Establece varias propiedades CSS de los elementos seleccionados:
 
−
<source lang="javascript">
 
−
//$(selector).css({properties})
 
−
$("p").css({"background-color":"yellow","font-size":"200%"});
 
−
</source>
 
  
−
Establece la altura de los elementos seleccionados:
+
===Método on() - Ventajas I===
−
<source lang="javascript">
+
*Permite usar un mismo manejador de eventos para múltiples elementos html suscribiendo el manejador a un elemento padre<br/>
−
//$(selector).height(value)
+
*Dado el siguiente código html:
−
$("#div1").height("200px");
+
<source lang="html4strict">
 +
<div id="content">
 +
    <a href="#">enlace1</a>
 +
    <a href="#">enlace2</a>
 +
    <a href="#">enlace2</a>
 +
</div>
 
</source>
 
</source>
−
 
+
Si queremos asignar el mismo manejador de eventos a todos los elementos <a>, podemos hacerlo de la siguiente forma:
−
Establece la anchura de los elementos seleccionados:
+
 
<source lang="javascript">
 
<source lang="javascript">
−
//$(selector).width(value)
+
$("#content").on("click", "a", function() {
−
$("#div2").width("300px");
+
    // manejar el evento
 +
    // $(this) apunta al <a> que ha generado el evento
 +
});
 
</source>
 
</source>
 +
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
== Formularios ==
+
 
 +
*Esto tiene varias ventajas:
 +
 
 +
*Sólo se crea una única función, independientemente del número de elementos <a> que tengamos, reduciendo el consumo de recursos.
 +
*Es válido para elementos que no existen todavía. Si apareciese un nuevo elemento <a> dentro del <div>, automáticamente estaríamos manejando su evento click. Esto es especialmente útil cuando generamos html dinámicamente.
 +
 
 +
 
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Función val(): para obtener los valores de los elementos o inicializarlos.
+
===Método on() - Ventajas II===
−
<source lang="javascript">
+
*Permite definir un mismo manejador de eventos para distintos tipos de eventos<br/>
−
/*Inicializamos la caja de texto y luego guardamos su contenido en una variable*/
+
 
−
$("textarea").val("Esto es una caja de texto");
+
−
var texto = $("textarea").val();
+
−
</source>
+
−
*En caso de inicializar varios valores a la vez (por ejemplo un select múltiple), los pondremos entre corchetes:
+
 
<source lang="javascript">
 
<source lang="javascript">
−
$("select").val(["Pedro", "Juan", "Miguel"]);
+
$("p").on("click mouseenter mouseleave", function(e){
 +
  if ($(this).css("color")!="rgb(250, 100, 0)")
 +
    $(this).css("color", "rgb(250, 100, 0)");
 +
  else
 +
    $(this).css("color", "rgb(150, 0, 255)");
 +
  })
 
</source>
 
</source>
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Función text(): Obtiene o establece el contenido de los elementos seleccionados.
+
===Método off()===
−
*Es parecida a html(), pero obtendremos solo texto, sin etiquetas:
+
*Para esta acción, contábamos con varios métodos como unbind(), die() o undelegate().
−
<source lang="javascript">
+
*De nuevo, el objetivo principal de la nueva instrucción es reemplazarlos a todos de un modo consistente.
 +
*La sintaxis de off() resulta similar a la de on():<br/>
 +
'''$(elements).off( [ events ] [, selector] [, handler] );'''
 +
Con off(), todos los parámetros son opcionales. Cuando se utiliza en su forma más simple, $(elements).off(), se eliminan todos los eventos asociados al conjunto seleccionado.
 +
</div>
 +
<div class="slide">
 +
 
 +
===Ejemplo===
 +
*El evento click se asocia o se elimina del elemento #theone.
 +
*Uso de find para optimizar el código
 +
*Uso de click() para mayor legibilidad
 +
<source lang="html4strict">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
−
<head>
+
<head>
−
<script src="jquery.js"></script>
+
  <style>
−
<script>
+
    button { margin:5px; }
−
$(document).ready(function(){
+
    button#theone { color:red; background:yellow; }
−
  $("#btn1").click(function(){
+
  </style>
−
    alert("Text: " + $("#test").text());
+
  <script src="http://code.jquery.com/jquery-latest.js"></script>
−
  });
+
</head>
−
  $("#btn2").click(function(){
+
<body>
−
    alert("HTML: " + $("#test").html());
+
  <button id="theone">Does nothing...</button>
−
  });
+
  <button id="bind">Add Click</button>
−
});
+
  <button id="unbind">Remove Click</button>
−
</script>
+
  <div style="display:none;">Click!</div>
−
</head>
+
  <script>
−
 
+
      function aClick() {
−
<body>
+
        $("div").show().fadeOut("slow");
−
<p id="test">Texto con <b>negrita</b></p>
+
      }
−
<button id="btn1">Ver texto</button>
+
      $("#bind").click(function () {
−
<button id="btn2">Ver html</button>
+
        $("body").on("click", "#theone", aClick)
−
</body>
+
        .find("#theone").text("Can Click!");
 +
      });
 +
      $("#unbind").click(function () {
 +
        $("body").off("click", "#theone", aClick)
 +
        .find("#theone").text("Does nothing...");
 +
      });
 +
  </script>
 +
</body>
 
</html>
 
</html>
−
 
 
</source>
 
</source>
 
</div>
 
</div>
 
</div>
 
</div>

Última revisión de 10:16 19 nov 2012


Eventos en jQuery

Como funcionan los eventos en jQuery

$(".mienlace").click(function(mievento){
   mievento.preventDefault();
   alert("Has hecho clic. Como he hecho preventDefault, no te llevaré al href");
});
  • El evento se define sobre todos los objetos seleccionados mediante el selector jQuery
En este caso todos los elementos con class="mienlace"
  • El tipo de evento lo definimos con la función click o similares.
  • El evento define como parámetro una función que será la manejadora del evento.
  • 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()


Listado de Eventos

Eventos relacionados con el 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()
  • 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() {
     Put in mouse enter function here
  }, function() {
     Put in mouse leave function here
});
//Ejemplo:
$("#p").hover(function () {
     $(this).css("background-color", "blue");
  }, function () {
     $(this).css("background-color", "white");
});
  • toggle()
Sirve para indicar dos o más funciones para ejecutar cuando el usuario realiza clics, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics. 
$("#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>

Asociación de DOM y eventos

Métodos bind(), live() y delegate()

  • En la versión de jQuery 1.7 han intentado unificar las APIs de manejo de eventos en los métodos on() y off().
  • Estos métodos sustituyen a los antiguos bind(), delegate() y live().
  • Información del resto de métodos

Método on() - Introducción

  • $(elements).on(events [, selector] [, data], handler);
  • Las funciones para eventos vistas hasta ahora, como click, son atajos a la función on(): 
// Asignar un manejador de eventos usando click
$("#header a").click(function() {
    // manejar el evento
});
 
// Asignar un manejador de eventos usando on
$("#header a").on("click", function() {
    // manejar el evento
});

Estas dos construcciones son equivalentes, pero on() permite hacer muchas más cosas...

Método on() - Ventajas I

  • Permite usar un mismo manejador de eventos para múltiples elementos html suscribiendo el manejador a un elemento padre
  • Dado el siguiente código html: 
<div id="content">
    <a href="#">enlace1</a>
    <a href="#">enlace2</a>
    <a href="#">enlace2</a>
</div>

Si queremos asignar el mismo manejador de eventos a todos los elementos <a>, podemos hacerlo de la siguiente forma: 

$("#content").on("click", "a", function() {
    // manejar el evento
    // $(this) apunta al <a> que ha generado el evento
});
  • Esto tiene varias ventajas:
  • Sólo se crea una única función, independientemente del número de elementos <a> que tengamos, reduciendo el consumo de recursos.
  • Es válido para elementos que no existen todavía. Si apareciese un nuevo elemento <a> dentro del
    , automáticamente estaríamos manejando su evento click. Esto es especialmente útil cuando generamos html dinámicamente.


Método on() - Ventajas II

  • Permite definir un mismo manejador de eventos para distintos tipos de eventos
$("p").on("click mouseenter mouseleave", function(e){
  if ($(this).css("color")!="rgb(250, 100, 0)")
    $(this).css("color", "rgb(250, 100, 0)");
  else
    $(this).css("color", "rgb(150, 0, 255)");
  })

Método off()

  • Para esta acción, contábamos con varios métodos como unbind(), die() o undelegate().
  • De nuevo, el objetivo principal de la nueva instrucción es reemplazarlos a todos de un modo consistente.
  • La sintaxis de off() resulta similar a la de on():

$(elements).off( [ events ] [, selector] [, handler] ); Con off(), todos los parámetros son opcionales. Cuando se utiliza en su forma más simple, $(elements).off(), se eliminan todos los eventos asociados al conjunto seleccionado.

Ejemplo

  • El evento click se asocia o se elimina del elemento #theone.
  • Uso de find para optimizar el código
  • Uso de click() para mayor legibilidad 
<!DOCTYPE html>
<html>
 <head>
  <style>
     button { margin:5px; }
     button#theone { color:red; background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <body>
   <button id="theone">Does nothing...</button>
   <button id="bind">Add Click</button>
   <button id="unbind">Remove Click</button>
   <div style="display:none;">Click!</div>
   <script>
      function aClick() {
         $("div").show().fadeOut("slow");
      }
      $("#bind").click(function () {
         $("body").on("click", "#theone", aClick)
         .find("#theone").text("Can Click!");
      });
      $("#unbind").click(function () {
         $("body").off("click", "#theone", aClick)
         .find("#theone").text("Does nothing...");
      });
   </script>
 </body>
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/Eventos&oldid=10566»