jQuery / Removiendo un evento

Bienvenidos sean a este post, hoy continuaremos una vez mas con los eventos.

Ya vismo como asignar un evento asi como tambien manejarlos pero que sucede cuando nuestra pagina cambio y el evento ahora no es necesario? bueno, tenemos dos caminos siendo el primero un condicional o simplemente removerlo.

Para ello vamos a descargar el codigo que estuvimos trabajando en el post anterior:

Extraigan los archivos en un directorio en cualquier parte del PC, vamos a suponer que ahora necesitamos que el div cambiador no se oculte cuando apliquemos algunas de las clases a nuestra pagina pero si cuando estemos en la manera predeterminada, el-default, y para ello tomaremos este bloque del archivo codigo.js:

$(document).ready(function() {
	$('#el-default').addClass('seleccionado');
	$('#cambiador').click(function(ev) {
		if ($(ev.target).is('button')) {
			var e = ev.target.id.split('-')[1];
			$('body').removeClass()
			.addClass(e);
			$('#cambiador button')
			.removeClass('seleccionado');
			$(ev.target).addClass('seleccionado');
		} else {
			$('#cambiador button')
			.toggleClass('oculto');
		}
	});	
});

De la siguiente manera:

$(document).ready(function() {
	$('#el-default').addClass('seleccionado');
	$('#cambiador').click(function(ev) {
		if ($(ev.target).is('button')) {
			var e = ev.target.id.split('-')[1];
			$('body').removeClass()
			.addClass(e);
			$('#cambiador button')
			.removeClass('seleccionado');
			$(ev.target).addClass('seleccionado');
		} else {
			$('#cambiador button')
			.toggleClass('oculto');
		}
	});
	$('#el-grande, #el-chico').click(function(){
		$('#cambiador').off('click');
	});
});

Al evento click anterior le agregamos otro donde le diremos que seleccione los dos botones encargados de aplicar las clases pero usaremos la funcion click para capturar dicho evento y despues seleccionaremos al contenedor y le removeremos el evento click mediante el metodo off, vamos a ver como funciona ahora nuestra pagina mediante el siguiente video

Si prestan atencion en el video podemos ver como la pagina funciona bien hasta que presionamos uno de los botones que aplican las clases, a partir de ahi no solo se deshabilita la opcion de esconder el contenedor sino que tambien nos deshabilita los botones 😱 porque al aplicar el metodo off deshabilita completamente el evento informado en todos los elementos del elemento seleccionado pero esto tiene una solucion llamada namespace para manejadores de eventos.

En este caso es basicamente asignarle un identificador para poder ser mas especificos a la hora de poder manipular los eventos, esto usualmente se denomina como event namespacing, tomemos la siguiente linea:

$('#cambiador').click(function(ev) {

Y cambiemos de la siguiente manera:

$('#cambiador').on('click.esconder',function(ev) {

Observen que ahora le pasamos un identificador al evento y volvimos a usar el metodo on para poder identificarlo correctamente, lo siguiente sera cambiar el bloque encargado de remover el evento click de la siguiente manera:

	$('#el-grande, #el-chico').click(function(){
		$('#cambiador').off('click.esconder');
	});

En este caso solamente le pasamos el nuevo identificador en lugar de pasar el evento como hicimos anteriormente, si lo prueban deberia seguir con la msma falla, a esta altura se preguntaran porque no lo soluciono si dije que era una soluacion? bueno, en realidad es una parte porque ahora entra en accion la segunda parte y para ello debemos cambiar todo el codigo del archivo de la siguiente manera:

codigo.js

$(document).ready(function() {
	$('#cambiador').hover(function() {
		$(this).addClass('flotar');
	}, function() {
		$(this).removeClass('flotar');
	});
});
$(document).ready(function() {
	var cambiar=function(ev){
		if ($(ev.target).is('button')) {
			var e = ev.target.id.split('-')[1];
			$('body').removeClass()
			.addClass(e);
			$('#cambiador button')
			.removeClass('seleccionado');
			$(ev.target).addClass('seleccionado');
		} else {
			$('#cambiador button')
			.toggleClass('oculto');
		}	
	};
	$('#el-default').addClass('seleccionado');
	$('#cambiador').on('click.esconder',cambiar);
	$('#el-grande, #el-chico').click(function() {
		$('#cambiador').off('click.esconder');
	});
	$('#el-default').click(function() {
		$('#cambiador').on('click.esconder',cambiar);
	});
});

En este caso hicimos pocos cambios pero suficientes, el primer bloque encargado de llamar a flotar no lo cambiamos porque no es necesario, en cambio si los hicimos en el segundo, lo primero que hicimos fue asignar toda la funcion anonima que usabamos en el primer evento click a una llamada cambiar, luego en ese evento pasamos la nueva funcion, volvemos a usar el mismo llamado para quitar el evento y seguimos con el namespace que le asignamos pero aca viene la segunda novedad, seleccionamos el boton de default y le asignamos un evento un click para volver a recuperar el control como era antes veamos como funciona mediante el siguiente video

Como pueden ver vuelve a funcionar casi como lo hacia anteriormente pero no solamente podemos mejorar ese codigo sino que podemos recuperar la conducta anterior pero con la nueva, volvamos a modificar el segundo bloque de la siguiente manera:

$(document).ready(function() {
	var cambiar=function(evento){
		if (!$(evento.target).is('button')) {
			$('#cambiador button')
			.toggleClass('oculto');
		}
	};
	var clases=function(ev) {
		var e = ev.split('-')[1];
		$('body').removeClass()
		.addClass(e);
		$('#cambiador button')
		.removeClass('seleccionado');
		$(ev).addClass('seleccionado');
	};
	$('#el-default').addClass('seleccionado');
	$('#cambiador').on('click',cambiar);
	$('#cambiador button').click(function(){
		$('#cambiador').off('click');
		switch(this.id)
		{
			case "el-default":
				$('#cambiador').on('click',cambiar);
				clases('#' + this.id);
				break;
			default:
				clases('#' + this.id);
				break;
		}
	});
});

Hicimos pocas modificaciones pero importantes, la primera fue cambiar para que solamente aplique la clase oculto y de esta forma alterne entre ocultar o mostrar los botones, la parte encargada de aplicar la clase a la pagina y a los botones la pasamos a otro objeto llamado clases, a traves de una funcion anonima como la anterior, despues aplicaremos la clase seleccionado al boton default, lo siguiente sera seleccionar todos los botones y le aplicaremos el evento click, lo primero que haremos sera remover el evento click de cambiador, despues agregaremos un switch donde evaluaremos el id de cada boton, el primer case evalua a el-default, aqui le volvemos a aplicar el evento click al cambiador y le pasamos la funcion cambiar, y luego usamos a la funcion clases, si se preguntan porque puse el numeral antes del valor del id, es para que encuentre correctamente a cada elemento, como en los otros dos botones solo aplicaremos de vuelta a la funcion clases con los id y el numeral, esto hara que se aplique la clase correspondiente y seguira sin funcionar el click sobre cambiador, veamos como funciona ahora nuestra pagina

Observen que ahora no solo mantuvimos el esconder los botones sino que tambien se aplicaran las clases sobre la pagina y no podremos ocultarlo salvo que sea el predeterminado o default, les dejo un archivo con el codigo final de este post:

En resumen, hoy hemos visto como remover un evento, como es simple, pero como puede afectarnos al resto, por esa razon despues hemos visto los dos procedimientos para poder apuntarlo a un evento de un elemento y no sobre todos, por ultimo hemos visto como recuperar el comportamiento habitual de la pagina mas lo agregado en esta, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.