Utilisez les événements !

Exemple n° 1

Afficher

<script type="text/javascript">
	$(document).ready(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;
		}
	});
</script>