<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>