Creando JQuery Custom Events

jQuery sigue siendo uno de los frameworks más utilizados de JavaScript pero a la vez es uno de los frameworks que mas curiosidades tienes. Cada día tenemos aplicaciones JavaScript más complejas y en muchas ocasiones nos vendrá bien generar nuestros JQuery Custom Events para desacoplar el código de JavaScript,vamos a ver un ejemplo.


<html>

<head>
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {

$("p").hide();

$("#boton1").click(function() {

$("<tr><td>dato3</td><td>dato4</td></tr>")
.appendTo("table");

$("p").text("crea fila").fadeIn("slow", function() {

$(this).fadeOut("slow");
});

});

$("#boton2").click(function() {
$("tr:last").remove();
$("p").text("eliminada fila").fadeIn("slow", function() {

$(this).fadeOut("slow");

});
});

});
</script>
</head>

<body>
<table>
<tr>
<td>dato1</td>
<td>dato2</td>
</tr>
</table>
<input type="button" id="boton1" value="nuevo" />
<input type="button" id="boton2" value="eliminar" />
<p></p>
</body>

</html>

&nbsp;

Este bloque de código se encarga de añadir o eliminar items de una tabla utilizando jQuery.

jQueryCustomEvents

El código funciona correctamente pero esta muy acoplado entre sí. Es muy probable que deseemos centralizar las operativas que se realizan contra la tabla. Vamos a usar jQuery Custom Events para enfocar de otra forma.


<html>

<head>
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {

$("p").hide();

$("#boton1").click(function() {
$("table").trigger("cambiaTabla", {
texto: "crea fila"
});

});

$("#boton2").click(function() {
$("table").trigger("cambiaTabla", {
texto: "elimina fila"
});
});

$("table").bind("cambiaTabla", function(evento, datos) {
if (datos.texto == "crea fila") {

$("<tr><td>dato3</td><td>dato4</td></tr>").appendTo('table');

} else {

$("tr:last").remove();

}

$("p").text(datos.texto).fadeIn("slow", function() {

$(this).fadeOut("slow");

});
});

});
</script>
</head>

<body>
<table>
<tr>
<td>dato1</td>
<td>dato2</td>
</tr>
</table>
<input type="button" id="boton1" value="nuevo" />
<input type="button" id="boton2" value="eliminar" />
<p></p>
</body>

</html>

En este caso cada uno de los botones genera un evento personalizado  («cambiarTabla») y en una función aparte capturamos esos eventos y ejecutamos el código que corresponda.

jQuery Custom Events Diagrama

 

Los eventos personalizados nos pueden ser muy útiles en situaciones complejas.

Post By Cecilio Álvarez Caules (32 Posts)

Oracle Certified Master, Java EE Enterprise Architect .Experto en la plataforma JEE y Trainer. Autor del libro Arquitectura Java Sólida Dueño del blog sobre JEE Arquitectura Java

Website: →

Connect

,

Trackbacks/Pingbacks

  1. jQuery Custom Events para CantabriaTIC - Arquitectura Java - 15 diciembre, 2015

    […] Hoy he escrito un artículo de jQuery Custom Events para la gente de CantabriaTIC . El artículo aborda como crear eventos personalizados con jQuery para reducir el acoplamiento entre diferentes bloques de código . Podeis acceder al artículo desde aquí. […]

Deja un comentario

Leave your opinion here. Please be nice. Your Email address will be kept private.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Translate »