Dans certains cas, on peut être amenés à rajouter des fonctionnalités coté client en fonction d’événements. Nous allons voir comment le faire avec la librairie javascript prototype. Nous allons prendre un exemple simple : ajoutez sur les liens ayant pour classe « imprimer » l’appel à la fonction print() lors du clic. Cela nous permet également d’avoir un code plus propre puisque nous avons une séparation entre présentation (page html) et métier (javascript).
Codes
Il faut d’abord inclure la librairie prototype
Voici le code html des liens:
imprimer
Voici la fonction javascript :
document.observe('dom:loaded', function() {
$$('a.imprimer').invoke('observe', 'click', function() {
window.print();
});
});
Explications
La méthode observe
C’est cette méthode qui permet d’écouter les événements. Dans la première ligne, on écoute l’événement ‘dom:loaded’ qui correspond à la fin de chargement de la page. On peut écouter tout type d’évènements comme le clic sur un lien ou bouton, l’appui sur une touche, …
La méthode $$
Cette méthode permet de récupérer une liste d’éléments via un sélecteur CSS. Dans notre cas, on récupère tous les éléments de type lien (a) qui ont pour classe ‘imprimer’
La méthode invoke
Cette méthode permet d’appeler la même méthode pour plusieurs éléments. Dans notre exemple, on appelle la méthode observe pour tous les éléments récupérés via $$.
Conclusions
Nous venons d’ajouter du comportement dans notre page html avec quelques lignes de javascript. C’est grâce à la puissance de prototype que cela est possible.
Remarque : Dans le cas où vous générer/récupérer du code (via de l’AJAX par exemple), il faudra relancer votre méthode d’écoute des événements pour que votre nouveau code prenne en compte ce comportement.
Tweet