Utilisez les événements !

Exemple n° 1

Afficher

$(function(){
	/*
	* On déclare attendre un événement en utilisant bind()
	* On attend un événement du type appendAffiche dans l'espace de nom type1
	* On consommera l'événement dans la fonction appendAfficheEventHandler(event)
	
	* N.B. : event.data peut recevoir des données au niveau du bind().
	*/
	$("#affiche").bind("appendAffiche.type1", {usage: "fréquent"}, appendAfficheEventHandler);
	
	/*
	* On construit l'événement du type appendAffiche dans l'espace de nom type1.
	* Il est très important de ne pas oublier de préciser l'espace de nom souhaité.
	*
	* L'objet $.Event() possède des attributs et des méthodes.
	* N.B. : Je conseille de considérer les propriétés accessibles en lecture seulement
	* pour ne pas interférer avec le fonctionnement normal de jQuery.
	* Les propriétés sont : type, target, data, relatedTarget, currentTarget, pageX, 
	* pageY, result et timeStamp.
	*
	* N.B. : L'espace de nom est très utile :
	* a) pour séparer les événements de même nom mais qui ne seront pas consommés de la 
	* même manière et/ou par le même objet ;
	* b) pour annuler l'attende d'un événement particulier : 
	* $("#affiche").unbind("appendAffiche.type1");
	*    sans annuler l'attende de tous les événements appendAffiche.
	*
	* N.B. : il y a une particularité qu'il est indispensable de retenir !
	* L'événement $.Event("appendAffiche.type2") ne sera pas intercepter par
	* $("#affiche").bind("appendAffiche.type1", appendAfficheEventHandler);
	* Mais l'événement $.Event("appendAffiche") sera intercepté partout,
	* ce qui peut avoir son utilité pour déclencher l'événement appendAffiche
	* dans tous les espaces de nom (exemple : type1, type2, etc.).
	*/
	var appendEvent = new $.Event("appendAffiche.type1");			
	appendEvent.dvjh = {
		utilisateur: "Daniel Hagnoul",
		css: {
			color: "red",
			fontSize: "2em"
		},
		data: {
			un: 1,
			deux: 2,
			trois: 3
		},
		dimArray: new Array(24, 36, 48, 52, 64)
	};
	
	/*
	* On déclenche l'événement en utilisant trigger()
	*/
	$("#btnAffiche").click(function(){
		$("#affiche").trigger(appendEvent);
	});
	
	/*
	* On consomme l'événement
	*/
	function appendAfficheEventHandler(event){
		var s = [];
		
		s.push("<p><span style='color:#FF0000;'>Les attributs réservés :</span>");
		s.push("event.type = " + event.type);
		s.push("event.target = " + event.target);
		s.push("event.target.id = " + event.target.id);
		s.push("event.data = " + event.data);
		s.push("event.data.usage = " + event.data.usage);
		s.push("event.relatedTarget = " + event.relatedTarget);
		s.push("event.currentTarget = " + event.currentTarget);
		s.push("event.currentTarget.id = " + event.currentTarget.id);
		s.push("event.pageX = " + event.pageX);
		s.push("event.pageY = " + event.pageY);
		s.push("event.result = " + event.result);
		s.push("event.timeStamp = " + event.timeStamp);
		s.push("new Date(event.timeStamp) = " + new Date(event.timeStamp));
		
		var d = event.dvjh;
		
		s.push("</p><p><span style='color:#FF0000;'>Un extrait de vos données :</span>");
		s.push("event.dvjh.utilisateur = " + d.utilisateur);
		s.push("event.dvjh.css = " + d.css);
		s.push("event.dvjh.css.fontSize = " + d.css.fontSize);
		s.push("event.dvjh.data = " + d.data);
		s.push("event.dvjh.data.deux = " + d.data.deux);
		s.push("event.dvjh.dimArray = " + d.dimArray);
		s.push("event.dvjh.dimArray[2] = " + d.dimArray[2]);
		s.push("</p>");
		
		$("#affiche").append(s.join("<br/>"));
		
		return false;
	}
});