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.