Chaque framework JavaScript implémente la gestion des événements entre navigateurs, vous encourageant à vous éloigner de l'ancien style d'ajout d'événements en ligne et à utiliser une approche linéaire rationalisée. Jetez un œil à l'exemple jQuery dans le listing 6 qui utilise l'événement hover pour mettre en évidence un élément div.
Listing 6 : Attacher l'événement de survol à l'aide de jQuery
$('#the-box').hover(function() {
$(this).addClass('highlight');
}, fonction() {
$(this).removeClass('highlight');
});
Il s'agit d'un événement spécial de jQuery, et vous constaterez qu'il fournit deux fonctions. La première est appelée lorsque l'événement onMouseOver se déclenche et la seconde fonction est appelée lorsque l'événement onMouseOut se déclenche. En effet, il n'existe pas d'événement DOM standard pour le survol. Regardons un événement plus typique comme un clic (consultez le listing 7) :
Listing 7 : Joindre des événements de clic à l'aide de jQuery
$('#le-bouton').click(function() {
alert('Vous avez appuyé sur le bouton !');
});
Comme vous pouvez le voir, il n'y a qu'un seul paramètre de fonction dans l'instance. La plupart des événements dans jQuery sont gérés de la même manière : en utilisant les gestionnaires d'événements dans jQuery, le contexte fait référence à l'objet qui a déclenché l'événement. Certains frameworks ne fonctionnent pas de cette façon. Dans le cas de Prototype, le code du Listing 7 ressemble à celui du Listing 8.
Listing 8 : Joindre des événements de clic à l'aide d'un prototype
$('le-bouton').observer('cliquez', function(e) {
alert('Vous avez appuyé sur le bouton !');
});
La première chose que vous remarquerez est qu'il n'y a pas de fonction click, mais une fonction observer qui accepte un paramètre d'événement avant de se référencer. Vous remarquerez également que la fonction accepte un paramètre e, où le contexte fait référence à l'élément qui a déclenché l'événement. Pour voir comment cela fonctionne, réécrivons le code du Listing 6 en utilisant Prototype (voir Listing 9).
Listing 9 : Joindre des événements de survol à l'aide de Prototype
$('the-box').observer('mouseover', function(e) {
var el = Event.element(e);
el.addClassName('highlight');
});
$('the-box').observer('mouseout', function(e) {
var el = Event.element(e);
el.removeClassName('highlight');
});
jQuery est également différent, il vous suffit d'utiliser la fonction $ pour obtenir les variables de contexte, tandis que la bibliothèque Prototype utilise la fonction Event.element(). De plus, vous avez remarqué que vous devez séparer les événements mouseover et mouseout.
Grâce à certains didacticiels de cet article, vous pouvez constater que les fonctions sont créées en ligne et non nommées. Cela signifie qu'il ne peut pas être réutilisé, et l'exemple de survol de Prototype nous donne également l'occasion de voir comment utiliser les fonctions nommées. Le listing 10 illustre cette méthode.
Listing 10 : Amélioration des événements de survol à l'aide de Prototype
Vous remarquerez qu'à ce stade, vous n'avez besoin de définir qu'une seule fonction. Il est appelé par les événements mouseover et mouseout. Cette fonction détermine si un élément a un nom de classe « surligner » et l'ajoute ou le supprime en fonction du résultat. Vous remarquerez également que le paramètre e est passé implicitement. En d’autres termes, vous avez transmis un argument ambigu à la fonction observer.
Adresse de réimpression : http://www.denisdeng.com/?p=720
Adresse d'origine : http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
fonction basculeClasse(e) {
var el = Event.element(e);
if(el.hasClassName('highlight'))
row.removeClassName('highlight');
autre
row.addClassName('highlight');
}
$('the-box').observer('mouseover', toggleClass);
$('the-box').observer('mouseout', toggleClass);