jQuery / Extendiendo eventos

Bienvenidos sean a este post, hoy hablaremos sobre lo que indica el titulo.

Algunos eventos tales como mouseenter o ready son designados como eventos especiales, estas utilizan el framework de extension de eventos ofrercido por jQuery permitiendo que tales eventos tomen accion varias veces a lo largo de un ciclo de vida de un manejador de eventos, dado que tambien necesitamos que reaccione a eventos vinculados o sin vinculos, e inclusive evitar conductas predeterminadas como el click en un link, afortunadamente la API nos permite crear nuevos eventos sofisticados al estilo de eventos nativos de DOM.

Para poder implementar conductas especiales para un evento se debe agregar una propiedad al objeto $.event.special y esta propiedad tiene un nombre como su clave, la cual contiene llamadas en muchos diferentes tiempos del ciclo de vida del evento, veamos algunas de las incluidas:

• add, se usa cada vez que un evento es vinculado a un controlador
• remove, se usa para desvincular un evento de un controlador
• setup, similar a add pero solamente cuando ningun controlador de eventos esta vinculado al elemento
• teardown, es lo contrario al anterior, solo es llamado cuando el ultimo controlador se desvinculo del elemento
• _default, se convierte en la conducta predeterminada del evento salvo que un controlador de eventos impida la accion predeterminada

Vamos a ver un ejemplo para aplicarlo, para ello tomaremos el codigo del post anterior pero en caso de no tenerlo les dejo un link para descargarlo:

Extraigan todos los archivos en un directorio pero recuerden que para poder probarlo y que funcione correctamente necesitan un servidor web debido a que usamos Ajax y no es soportado localmente por los navegadores, con esto comentado nuestro primer paso sera ir al archivo codigo.js y lo modificaremos de la siguiente manera:

(function($) {
	$.event.special.scrollDemora = {
	setup: function(datos) {
		var timer = 0;
		$(this).on('scroll.scrollDemora', function(ev) {
			if (!timer) {
				timer = setTimeout(function() {
					$(this).triggerHandler('scrollDemora');
					timer = 0;
				}, 250);
			}
		});
	},
	teardown: function() {
		$(this).off('scroll.scrollDemora');
	}
	};

	$(document).on('mouseenter mouseleave', 'div.foto', function(ev) {
		var $detalles = $(this).find('.detalles');

		if (ev.type == 'mouseenter') {
			$detalles.fadeTo('fast',0.7);
		} else {
			$detalles.fadeOut('fast');
		}
	});

	$(document).on('proxPag', function(ev, scrollVisible) {
		var url = $('#mas-fotos').attr('href');
		if (url) {
			$.get(url, function(datos) {
				var $datos = $(datos).appendTo('#galeria');
				if (scrollVisible) {
					var nuevoTop = $datos.offset().top;
					$(window).scrollTop(nuevoTop);
				}
				checkScrollPos();
			});
		}
	});

	var numPag = 1;
	$(document).on('proxPag', function() {
		numPag++;
		if (numPag < 5) {
			$('#mas-fotos').attr('href','pages/' + numPag + '.html');
		} else {
			$('#mas-fotos').remove();
		}
	});

	function checkScrollPos() {
		var dist = $(window).scrollTop() + $(window).height();
		if ($('#contenedor').height() <= dist) {
			$(document).trigger('proxPag');
		}
	}

	$(document).ready(function() {
		$('#mas-fotos').click(function(ev) {
			ev.preventDefault();
			$(this).trigger('proxPag', [true]);
		});
	
		$(window)
			.on('scrollDemora', checkScrollPos)
			.trigger('scrollDemora');
	});

})(jQuery);

En realidad reordenamos un pocco el codigo pero agregamos algunas bloques nuevos, primero establecemos todo en el namespace de jQuery, pero al comienzo agregamos este bloque de codigo:

	$.event.special.scrollDemora = {
	setup: function(datos) {
		var timer = 0;
		$(this).on('scroll.scrollDemora', function(ev) {
			if (!timer) {
				timer = setTimeout(function() {
					$(this).triggerHandler('scrollDemora');
					timer = 0;
				}, 250);
			}
		});
	},
	teardown: function() {
		$(this).off('scroll.scrollDemora');
	}
	};

Este es el evento especial que usaremos para extender el evento de scroll, en este caso lo usaremos para hacer una pequeña demora al momento de hacer el scroll, en este caso aplicamos dos propiedades el primero sera setup, donde definimos una variable, luego aplicamos un metodo on con el nuevo evento y lo aplicaremos al elemento actual, en este manejador tenemos un condicional donde verifica si timer esta vacio, en caso de ser verdadero establece un setTimeout para llamar al nuevo evento despues de pasado 250 ms, y resetea nuevamente la variable timer, por ultimo establecemos a teardown para desvincular el nuevo evento, despues tenemos el mismo bloque encargado de mostrar u ocultar las descripcion de la imagen, luego tenemos dos bloques para los eventos proxPag, el primero es para el caso de cuando hacemos click sobre el link encargado de agregar mas fotos a la galeria (y tambien con el scroll) y el segundo sera el encargado de cambiar el link y eliminarlo cuando sea mayor a cinco, despues tenemos la funcion encargada de chequear la posicion del scroll, donde primero definimos una variable con el valor del top de scroll mas la altura de la ventana y despues mediante un condicional verificamos si la altura del div contenedor es menor al valor de la variable anterior, en caso de ser verdadero dispara al evento proxPag.

Por ultimo usamos un ready para cuando la pagina este lista y seguiremos asociando el evento click al link mas-fotos y despues asociaremos el evento que agregamos para extender a la ventana, y usamos la funcion checkScrollPos para chequear la posicion y lo siguiente sera iniciar el mismo evento, si probamos la pagina trabajara de la siguiente manera

Observen como al llegar al final del scroll genera una pequeña demora para agregar las nuevas imagenes a la galeria, si bien este ejemplo cubre muchos aspectos basicos de como extender un evento en realidad es algo mucho mas extenso para comentar, pero otras posibles aplicaciones son:

• Modificar el objeto del evento permitiendo que los manejadores de evento dispongan de informacion disponible
• Causar eventos que ocurre en un solo lugar en el DOM inicien conductas asociadas con diferentes elementos
• Reaccionar a eventos nuevos o especificos del navegador que no sean estandar del DOM y permitiendo al codigo en jQuery reaccionar como si lo fueran
• Cambiar la forma que la delegacion y envoltura de los eventos sean manejados

Recuerden que para poder utilizar este ejemplo necesitan un servidor web, en caso de no tener uno les dejo dos posts:

En este primer post les comento como crear un pc virtual con un linux debian, despues les recomiendo este post:

Este post les comento como instalar un Apache en un debian y de manera opcional PHP y mariadb, se los recomiendo para no poner en riesgo sus equipos y solo necesita 1 GB de RAM y muy poco espacio en el disco, y una vez que no lo necesiten mas simplemente lo borran y listo, para finalizar les dejo un link con todos los archivos del proyecto y modificados en este post:

En resumen, hoy hemos visto como extender eventos, como se hace, para que sirve, despues lo aplicamos en un ejemplo y vimos algunas cosas extras que se pueden hacer con la extension de eventos, y en caso de conseguir mas material armare algo nuevo sobre este tema, 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.