Les événements (events) avec jQuery

Un événement est une action de l’utilisateur. Clic, double, clic, survol d’un élément, etc. Jquery permet de traiter de manière facile ce événements, et de leur associer des actions.

On peut placer des événements directement dans du code, sans passer par jQuery, bien sûr.

On procède alors comme ceci :

<div onClick="broom();"></div>

Le clic sur ce div (pas besoin que ce soit un lien) provoquera l’appel de la fonction broom.

Avec jQuery on procedera comme suit :

$("div").click(function(){
alert("cracaboom");
});

ce code va ajouter à tous les div de ma page une fonction, qui consiste à ouvrir une fenêtre d’alerte. Remarquez que je code directement le contenu de la fonction, sans faire appel à broom().
Pourquoi employer jQuery alors qu’écrire onClick fonctionne ?
1) Pour des questions de gain de temps : ici, tous les div reçoivent l’événement.
2) Pour séparer le code javascript du code html, et l’associer comme on le fait avec les css, ce qui est plus propre, plus conforme et plus facile à maintenir
3) Pour préparer un code dégradable. Nous expliquerons plus tard de quoi il s’agit.

Les événements les plus courants sont :
onClick, onDblclick, onMouseOver, onMouseOut, onChange, onKeydown.
Remarquer que ces événements comportent des majuscules, elles sont importantes : le javascript est case sensitive, sensible à la casse, et l’oubli de ces majuscules peuvent provoquer des erreurs.

Dans jQuery

Dans jQuery comme on l’a déjà aperçu, on code sans le "on" ni majuscules :

$("div").mouseover(function(){
$(this).css("background-color", "green");
});

JQuery propose pour vous des raccourcis intéressants :
Par exemple si vous voulez que la couleur d’un élément change quant il est survolé, puis que tout redevienne comme avant lorsque la souris le quitte, vous devez utiliser normalement deux fonctions : mouseover et mouseout. On peut grouper dans jQuery les deux comme ceci :

$("li").hover(
     function () {
       $(this).css("background-color", "green");
     },
     function () {
       $(this).css("background-color", "transparent");
     }
   );

La propriété "this"

Vous avez remarqué que j’ai employé deux fois déjà un mot bizarre, "this". Comme sa traduction "ceci" le laisse supposer, this transporte avec lui une information précieuse : celle de qui est affecté.
Ainsi, dans l’exemple précédent, un double événement est associé aux éléments de type "li" qui se trouvent dans ma page. Pour que chacun réagisse individuellement au survol, il faut préciser au script à qui je demande le changement de couleur de fond.
dans mon exemple, je veux que le fond de mes "li" devienne vert le temps que je les survole. Mais quel li ? Hé bien, this lui dit lequel : c’est celui d’où vient la fonction, le "li" où est placé le "onClick".
C’est très pratique pour appliquer en cascade d’autres traitements, par exemple :

$("div").click(function(){
$(this).css("background-color", "green");
alert( "ici il y a " + $(this).html() );
$(this).append("Et voilà");
});

Ici, j’ajoute pour chaque div un événement "onClick", qui pour chaque div individuellement va changer sur clic sa couleur de fond, afficher son contenu dans une fenêtre d’alerte, et lui ajouter "Et voilà".