Avisar de contenido inadecuado

Namespace en eventos de jQuery

{
}

Namespace o espacio de nombre (españolización que no se usa) es la contextualización de una variable o método, es decir, consiste en asociar un identificador a un grupo de variables y/o métodos.  En la vida real disponemos de muchos ejemplos, por ejemplo OboLog tiene el número de post 123, y Pixelover también puede tener el post 123 porque ambos están en namespaces diferentes, obolog y pixelover, respectivamente.

Ahora que sabemos que significa, vamos a ver como se aplica esto a los eventos en jQuery y luego veremos una aplicación práctica de los namespaced events. Todos sabemos como añadir un manejador de evento (click, por ejemplo) a un elemento mediante el método bind:

$("a").bind("click", function() { /* Code... */ });

Ahora si queremos contextualizar ese evento click, que pertenezca a un grupo utilizamos el siguiente código:

$("a").bind("click.namespace", function() { /* Code... */ });

Esto funcionará, igual que el anterior ejemplo, en cada click que se haga a los elementos a, pero además podremos llamar únicamente a esta función mediante el metodo trigger o desligar un grupo de funciones asociadas a un evento,

$("a").trigger("click.namespace");

Con esto hemos lanzamos el evento click con el espacio de nombre "namespace" de los elementos a.

$("a").unbind(".namespace");

Y con esto hemos desligado todos los tipos de eventos del espacio de nombre namespace, ya sean eventos click, dbclick, mousedown, mouseup, etc..

¿Se te ocurre como podrías utlizar los espacios de nombre en los eventos? Aquí te dejo un ejemplo simple de namespaced events. Consiste en un formulario que añade los valores que introduces en el campo "name" en una lista. La particularidad es que he dividido la tarea en 2 funciones, una para crear la lista y otra para añadir elementos, la primera de ellas la bindeo antes que la segunda y la desvindeo al acabarse ella misma. De esta manera consigo que la primera vez se llame a ambas funciones y las sucesivas solamente a la segunda.

HTML:

<form action="" method="post" id="addName">
<p>
  <label for="Name">Nombre:</label>
    <input type="text" name="name" value="" id="name"/>
  </p>
  <p><input type="submit" value="Añadir nombre"/></p>
</form>

Javascript:

//Bind Event for the first time
$('#addName').bind('submit.first', function(){
    $(this).after('<p>Lista de nombres:</p><ul id="listNames"></ul>').unbind('submit.first');
});

//Bind Event for ever
$('#addName').bind("submit", function(){
if('' == this.name.value) return false;
$('#listNames').append('<li>' + this.name.value + '</li>');
return false;
});

Ese es un ejemplo para ver el funcionamiento del namespacing, pero en este caso, ya que eliminamos el evento en la primera ejecución sería más útil utilizar el atajo one, quedando el primer evento de la siguiente manera:

//Bind Event for the first time
$('#addName').one(function(){
    $(this).after('<p>Lista de nombres:</p><ul id="listNames"></ul>');
});

Aquí podéis ver el funcionamiento del código expuesto anteriormente:

Demo

¿Qué te aparecido? ¿Te resulta útil? Cuéntanos dónde y cómo lo has aplicado para que aprendamos todos trucos nuevos de jQuery.

{
}

Deja tu comentario Namespace en eventos de jQuery

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar de usuario Tu nombre