3

Mtodos o administradores de eventos avanzados
1. Unir un evento a un objeto (on)

on(evento, [selector], [datos], funcin)
Asigna el evento a un elemento determinado:
evento (cadena de caracteres): designa el evento asociado. Si se especifican varios eventos,
se deben separar simplemente por un espacio.
selector (opcional): un filtro para seleccionar los hijos del elemento en el que se aplica el
evento.
datos (opcional): datos que se le pueden proporcionar a la funcin. Su uso es poco frecuente.
funcin: el cdigo que se ejecuta al desencadenarse el evento.
$("button").on("click", function() {
alert($(this).text());
});
o
function saludo(event) {
alert("Buenos das " + event.data.nombre);
}
$("boton").on("click", {nombre: "Carlos"}, saludo);
Este mtodo devuelve un objeto jQuery.
El mtodo
off()elimina
las acciones asociadas a un evento mediante el mtodo
on().
Los mtodos on(

) y bind() (ver Unir un evento a un objeto de este captulo) son ms potentes que los eventos especficos,
como cli
ck()o mouseover(), que hemos visto anteriormente.
El mtodo permite no solamente asignar uno o varios eventos a un objeto jQuery, en el que se ejecutar la funcin que se pasa como
argumento, sino tambin transmitir datos a esta funcin. De esta manera, un clic en un enlace o pasar el ratn por encima de una imagen
puede asignar informacin diferente al administrador de eventos. Por tanto, la funcin relacionada con el evento se podr ejecutar de
manera diferente segn el contexto que proporcionan los datos.
El mtodo o
n()se introdujo en la versin 1.7 de jQuery despus de una reescritura completa de la API que implementa la gestin de
eventos para asegurar una mayor coherencia y un mejor rendimiento. El empleo de este mtodo o
n() est muy recomendado en la
documentacin de jQuery ya que est destinado a reemplazar los mtodos ms antiguos de gestin de eventos
como bin
d(), delegate()y live(). Este ltimo ya qued obsoleto a partir de la versin 1.7 y se elimin en las siguientes versiones.
La gestin de los eventos por el mtodo onpuede utilizarse no solo sobre los elementos existentes sino tambin sobre los elementos futuros
que se pueden crear desde un script. Esta ltima caracterstica est vinculada al filtro selector que permite ampliar el administrador de
eventos a elementos hijos todava no creados.
Ejemplo
Vinculemos los eventos
color.
mouseovery mouseouta
una etiqueta de prrafo. Esta nueva asociacin tiene como accin poner o no un fondo de
Al cargar el DOM y en la inicializacin

de jQuery.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("p").on("mouseover mouseout", function(e){
$(this).toggleClass("over");
});
});
</script>
<style>
p { cursor: pointer;
padding-left: 20px;}
p.over { background: #9cf;}
</style>
</head>
<body>
<h3>Prrafo</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor.</p>
</body>
</html>
$("p").on("mouseover mouseout", function(e)

Los
eventos m
ouseovery mouseoutse
vinculan (o
n()) al prrafo <p>.
$(this).toggleClass("over");
});
La funcin asociada es alternar
(t
oggleClass()) a la clase CSS
over.
});
Fin de script.
2. Unir un evento a un objeto (bind)

bind(evento, [datos], funcin)
Asigna el evento a un elemento dado.
"evento" (cadena de caracteres): designa el evento asociado. Si se especifican varios
eventos, simplemente se tienen que separar por un espacio.
"datos" (opcional): datos que normalmente se proporcionan a la funcin.
"funcin": el cdigo que se tiene que ejecutar cuando se desencadene el evento.
$("button").bind("click", function() {
alert($(this).text() );
});
o
var mensaje = "Bienvenido";
$("#ejemplo").bind( "click", {msg: mensaje}, function(event) {
alert( event.data.msg );
});
El mtodo
unbind()elimina
Este mtodo
las acciones que el mtodo
bind()proviene
bind()ha
asociado a un evento.
del origen de jQuery (versin 1.0). No obstante, presenta ciertos lmites:
No puede agregar un administrador de eventos ms que para elementos existentes.

Puede consumir muchos recursos cuando se aplica a un selector que pueda sealar a
numerosas ocurrencias. De hecho, este mtodo bi
nd()une el administrador de eventos a
todos los elementos identificados por la seleccin. Si un evento c
lickest asociado a una
etiqueta de vnculo y su documento tiene 100 etiquetas <a>, se vincularn 100
administradores de eventos a su fichero. Esto disminuir la velocidad de ejecucin del script.
No es de extraar que jQuery aconseje no utilizar este mtodo
bind()y dar preferencia
al mtodo o
n()ms completo y ms competitivo.
El mtodo l
ive()que igualmente vinculaba un evento a un elemento se ha eliminado. Para
los que empiezan con jQuery no ser un problema ya que este mtodo ya no existe. Por el
contrario, para los desarrolladores que quieran actualizar una aplicacin jQuery ms antigua
utilizando este mtodo l

ive(), esta eliminacin puede entraar sorpresas desagradables. Lo
mismo ocurre con el mtodo d
ie()que eliminaba las acciones asociadas a un evento mediante el
mtodo li
ve().
Ejemplo
Mostremos un mensaje de aviso al hacer clic en un botn.
$("button").bind("click",function(){
<!doctype html>
<html lang="es">
<head>
<script>
$("button").bind("click", function(){
alert(Ha hecho clic en el botn.);
});
});
</script>
</head>
<body>
<button>Haga clic</button>
</body>
</html>
El evento c
lick est vinculado
(b
ind()) al botn (button).
alert("Ha hecho clic en el botn.");
});
La funcin asociada consiste en
mostrar
un
cuadro
de
aviso (
alert)en JavaScript clsico.
});
Fin del ready.
3. Delegar un evento
delegate(selector, evento, funcin)
Vincula una funcin a un evento para todos los elementos que correspondan al selector ahora y en el futuro.
Observe la introduccin del selector al que lleva el evento directamente en la sintaxis del mtodo.
Introducido en la versin 1.4 de jQuery, el mtodo delegate()era el ms utilizado para vincular un evento a un elemento. Sin embargo, la
documentacin ya no aconseja su utilizacin y recomienda el mtodo on
().
El mtodo
Ejemplo
undelegate()elimina
la asociacin creada por
delegate().
Haciendo clic en el prrafo inicial o en el nuevo, la funcin aade un nuevo prrafo (que no exista en el fichero inicial). Y as sucesivamente
<!doctype html>
<html lang="es">
<head>
<script>
$("body").delegate("p", "click", function(){
$(this).after("<p>Otro prrafo</p>");
});
});
</script>
<style>
p { background: #9cf;
cursor: pointer;
padding-left: 5px;
margin : 7px 0 7px 0;}
</style>
</head>
<body>
<p>Haga clic!</p>
</body>
</html>
4. Ejecutar una funcin solo una vez

one(evento,[datos],funcin)
Asocia una funcin a un evento dado. La diferencia con la funcin bind() es que la funcin asociada al evento solo se ejecutar, como
mximo, una vez para cada elemento de la seleccin.
"evento" (cadena de caracteres): tipo de evento implicado.
"datos" [opcional]: datos adicionales que se pasan al administrador de eventos. Su uso es
poco frecuente.
"funcin": funcin que se asocia al evento.
$("p").one("click", function(){
alert( $(this).text() );
});
o
$("body").one("click", "#ejemplo", function() {
alert( "Me muestro si #ejemplo es el primer elemento
en el que se hace clic en el body.");
});
Esta funcin puede ser muy til en algunos scripts.

Ejemplo
Imaginemos un botn que solo podemos pulsar una vez. Cuando se hace el primer clic, se muestra un mensaje.
<!doctype html>
<html lang="es">
<head>
<script>
$("button").one("click", function(){
$("div").html("<b>Es intil pulsar ms veces.</b>");
});
});
</script>
<style>
div { width: 180px;
height: 30px;
margin-top:10px;
padding-left: 5px;
border: 1px solid black;}
</style>
</head>
<body>
Solo se permite 1 nico clic<br>
<button>Prueba</button>
<div></div>
</body>
</html>
$("button").one("click", function(){
Al hacer clic en el botn, se ejecuta la
siguiente funcin.
$("div").html("<b>Es intil pulsar ms vece

});
La frase "Es intil pulsar ms veces."
se mostrar como Html en la capa.
Como se ha usado el mtodo one(),
la frase solo se muestra una vez y
cualquier otro clic en el botn no
realizar ninguna accin.
});
Fin del script.
5. Desencadenar un evento particular

trigger(evento)
Desencadena un evento particular para los elementos de la seleccin. Esto tambin va a desencadenar la accin por defecto del navegador
para este tipo de evento (si existe). Por ejemplo, usar el tipo de evento submiten la funcin tambin va a desencadenar el envo del
formulario por parte del navegador. Esta accin por defecto se puede evitar devolviendo " false" en una de las funciones asociadas al
evento, para uno de los elementos de la seleccin.
Tambin puede usar la funcin bind().
$("p").trigger("click");
Ejemplo
Al hacer clic en el enlace, se seleccionar la casilla de seleccin Checkbox.
Al hacer clic en el enlace, el script marca la casilla Checkbox, lo que desencadena un mensaje de alerta.
<!doctype html>
<html lang="es">
<head>
<script>
$(document).ready(function () {
$(input).on(click, function() {
alert(Checkbox marcado);
});
$(a).on(click, function() {
$(input).trigger(click);
return false;
});
});
</script>
<style>
a { color: black;}
</style>
</head>
<body>
<p><input type="checkbox"> Checkbox</p>
<p><a href="#">Desencadena el clic en el checkbox</a></p>
</body>
</html>
6. Al pasar el ratn
Esta funcin, propia de jQuery, agrupa los eventos onmouseovery onmouseoutde JavaScript o mouseovery mouseoutde jQuery, es decir,
cuando el cursor pasa por encima un elemento y sale de l.
hover(funcin 1, funcin 2)
El mtodo hover()de jQuery une dos eventos que se usan muy frecuentemente en el elemento seleccionado; cuando el cursor pasa por
encima y cuando sale de l.
Por tanto, este mtodo se ejecuta en dos partes. Cuando el cursor se sita sobre un elemento concreto, se ejecuta la primera funcin que se
ha pasado como parmetro. Cuando el cursor sale del mbito del elemento, se ejecuta la segunda funcin.
$("p").hover(function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
});
Al pasar el ratn por encima de los prrafos, se aade la clase hover. Cuando el cursor sale de la zona, se elimina la clase. Este mtodo
devuelve un objeto jQuery.
Ejemplo
El clsico, una imagen que cambia cuando el ratn pasa por encima de ella.
<!doctype html>
<html lang="es">
<head>
<style>
.image { position: absolute;
top: 10px;
left: 10px;}
</style>
</head>
<body>
<div class="image">
<img src="polucion1.jpg" alt="">
</div>
</body>
</html>
<script>
$(img).hover(function () {
this.src = polucion2.jpg;
},
function () {
});
});
</script>
El script jQuery se
siguiente manera:
<!doctype html>
<html lang="es">
<head>
<script">
la
Lo detallamos a continuacin.
Se aplica un mtodo hover() a las
imgenes.
},
En primer lugar, al pasar el cursor por
encima,
se
carga
la
imagen
"polucion2.jpg",
modificando
el
atributo srcde la etiqueta <img>.
function () {
});
Despus, cuando el cursor sale de la
imagen, el script vuelve a la situacin
inicial.
});
Fin del script.
El cdigo final es el siguiente:
escribe de
},
function () {
});
});
</script>
<style>
.image { position: absolute;
top: 10px;
left: 10px;}
</style>
</head>
<body>
<div class="image">
<img src="polucion1.jpg" alt="">
</div>
</body>
</html>

3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3

Uploaded by

Copyright:

Available Formats

Mtodos o administradores de eventos avanzados

1. Unir un evento a un objeto (on)

las acciones asociadas a un evento mediante el mtodo

Los mtodos on(

Al cargar el DOM y en la inicializacin

$("p").on("mouseover mouseout", function(e)

2. Unir un evento a un objeto (bind)

las acciones que el mtodo

del origen de jQuery (versin 1.0). No obstante, presenta ciertos lmites:

No puede agregar un administrador de eventos ms que para elementos existentes.

bind()y dar preferencia

utilizando este mtodo l

la asociacin creada por

4. Ejecutar una funcin solo una vez

Esta funcin puede ser muy til en algunos scripts.

$("div").html("<b>Es intil pulsar ms vece

5. Desencadenar un evento particular

El cdigo final es el siguiente:

You might also like