Los eventos en JQuery
Los enlaces a los eventos en JQuery son en realidad una composición de los selectores y una llamada a uno de los métodos de esta librería, que nos ayudan a asignar uno o varios eventos, para uno o varios elementos, a la función o funciones especificadas.
Antes de mostrar la forma de asignar los eventos, me gustaría que se tuvieran presentes dos puntos:
- Para que estos bindeos sean efectivos, necesitamos ubicarlos en una función que los lance al comienzo de la aplicación, o bien en un momento determinado donde adquieran esa funcionalidad. Por norma general, si queremos manejar los eventos al comienzo de la aplicación, podemos utilizar a su vez el evento ready, el cual ejecuta la función enlazada una vez que el DOM esté listo (se haya terminado de cargar la página).
$(document).ready(function() {
$("span").text("La pagina ya esta cargada");
})
- Existen dos formas de indicar qué función que queremos que se ejecute: Podemos crear una función anónima, la cual es definida en el momento del bindeo y por lo tanto no es necesario asignarle un nombre específico, o bien podemos escribir el nombre de la función que queremos que se lance en esa determinada acción y ubicar el comportamiento en otro lugar.
$(document).ready(function() {
alert("Esto es una función anónima")
})
$(document).ready(funcionConNombre);
function funcionConNombre() {
alert("Esto es una funcion declarada");
}
Una vez comentado esto, podemos comenzar a ver las distintas funciones de bindeo :)
Con esta librería, existen varias formas de enlazar un elemento, o varios, a uno o más eventos:
- Bind: Podemos asignar cualquier evento existente (onclick, onblur, etc.) a todos los elementos devueltos por el selector utilizado.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>
<!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 runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cont = 0;
$(document).ready(function() {
$("#btn").bind("click", function(e) {
cont++;
$("span").text(cont);
})
});
</script>
</head>
<body>
<input type="button" value="Bind" id="btn" />
<br />
<span></span>
</body>
</html>
Bind acepta eventos personalizados y, además, podemos asignar varios eventos a la vez separados por un espacio.
- One: La función enlazada al evento elegido solamente se ejecutará una vez.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>
<!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 runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cont = 0;
$(document).ready(function() {
$("#btn").one("click", function(e) {
cont++;
$("span").text(cont);
})
});
</script>
</head>
<body>
<input type="button" value="One" id="btn" />
<br />
<span></span>
</body>
</html>
- Trigger: Se utiliza para ejecutar eventos desde el código. Si utilizamos trigger para invocar un evento soportado por el navegador, debemos tener en cuenta que ejecutará tanto el que hayamos manejado como el del propio navegador.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>
<!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 runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cont = 0;
$(document).ready(function() {
$("a").bind("dblclick", function(e) {
$("#btn").trigger("click");
});
$("#btn").bind("click", function(e) {
cont++;
$("span").text(cont);
})
});
</script>
</head>
<body>
<input type="button" value="Bind" id="btn" />
<a href="#">Trigger</a>
<br />
<span></span>
</body>
</html>
- TriggerHandler: A diferencia del anterior, solamente lanza el evento que tenemos manejando (Si no existe mandaría undefined) y omite el evento por defecto del navegador.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>
<!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 runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cont = 0;
$(document).ready(function() {
$("#textbox").bind("focus", function(e) {
cont++;
$("span").text(cont);
});
$("#btnTrigger").bind("click", function(e) {
$("#textbox").trigger("focus");
})
$("#btnTriggerHandler").bind("click", function(e) {
$("#textbox").triggerHandler("focus");
})
});
</script>
</head>
<body>
<input type="button" value="Trigger" id="btnTrigger" />
<input type="button" value="TriggerHandler" id="btnTriggerHandler" />
<input type="text" id="textbox" />
<br />
<span></span>
</body>
</html>
En este ejemplo estamos jugando con el evento focus. Si pulsamos el botón que utiliza la función trigger veremos que el cont rapidamente suma dos y en el segundo caso, con triggerHandler, solamente uno. Además podemos comprobar que con triggerHandler no posiciona el foco en el textbox, a diferencia de trigger.
- Unbind: Se utiliza para realizar lo opuesto que con bind.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>
<!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 runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cont = 0;
$(document).ready(function() {
$("#btn").bind("click", function(e) {
cont++;
$("span").text(cont);
if (cont > 5) {
$("#btn").unbind("click");
}
});
});
</script>
</head>
<body>
<input type="button" value="Unbind" id="btn" />
<br />
<span></span>
</body>
</html>
- Live: Esta función en particular permite enlazar eventos a uno o varios elementos como a todos los futuros emparejados con estos primeros. Por el momento, está restringido a los eventos click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress y keyup y no es soportado por los eventos blur, focus, mouseenter, mouseleave, change y submit.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>
<!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 runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").live("click", function(e) {
$(this).before("<a>Otra referencia</a>");
});
});
</script>
</head>
<body>
<a>Una referencia</a>
<br />
<span></span>
</body>
</html>
Nota: En este ejemplo he utilizado before que pertenece al apartado de Manipulación, del cual escribiré más adelante :)
- Die: Sería el unbind de Live.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>
<!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 runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cont = 0;
$(document).ready(function() {
$("a").live("click", function(e) {
cont++;
$(this).before("<a>Otra referencia</a>");
if (cont > 5)
$("a").die("click");
});
});
</script>
</head>
<body>
<a>Una referencia</a>
<br />
<span></span>
</body>
</html>
- Hover: Simula el posicionamiento sobre un elemento.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>
<!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 runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("li").hover(function() {
$(this).css("color", "red");
});
});
</script>
</head>
<body>
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ol>
</body>
</html>
- Toggle: Podemos usarlo para proporcionar al evento click varias funciones. Se tiene en cuenta el orden en el cual las definimos y la forma de ejecutar cada una de ellas es hacer tantos click como funciones hayamos declarado dentro de toggle.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>
<!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 runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span").toggle(
function() {
$(this).css("backgroundColor", "red");
},
function() {
$(this).css("backgroundColor", "blue");
},
function() {
$(this).css("backgroundColor", "yellow");
}
, function() {
$(this).css("backgroundColor", "white");
}
);
});
</script>
</head>
<body>
<span>Utilizando Toggle</span>
</body>
</html>
Por último, si lo único que necesitamos es enlazar una función a un evento en concreto, similar a como lo podiamos hacer antaño, podemos indicar el nombre del evento y definir la función. Para este ultimo caso os dejo el enlace de eventos "helpers", además de todos los que he podido nombrar en este post.
¡Saludos!