, ajout d'une class CSS, animation d'un élément etc.) sur cette même page, et ainsi rendre la navigation plus interactive (web 2.0). Il est donc essentiel de comprendre comment fonctionnent les événements en Jquery.

Comment ça fonctionne ?

Il faut d'abord comprendre les éléments qui interviennent dans ce scénario

Votre code jQuery doit dire au navigateur (en fait à l'interpréteur Javascript inclus dans le navigateur) :

1. QUI il doit surveiller: l'élément de votre page HTML qui recevra un événement (sélectionné via le jQuery selector)
2. QUEL ÉVÉNEMENT écouter sur cet élément: le type d’événement  peut être un comportement humain (click de souris, survol du curseur, POST d'une form etc.) ou programmé (une modification de DOM par ex). Voir la liste des événements jQuery
3. QUOI FAIRE: déclencher une action quelconque en exécutant une fonction définie

Comment mettre en place les interactions entre ces différents éléments en jQuery

1. sélection de l'élément à qui on veut "attacher" (bind en anglais) un événement: $("#divClickable")
2. spécifier l’événement écouté lorsqu'il intervient sur l'élément sélectionné: $("#divClickable").dblclick()
3. ajout de la fonction déclenchée lorsque cet événement intervient (ici un double click sur notre DIV ayant l'ID divClickable): $("#divClickable").dblclick(function(){ alert ('vous avez effectué un bouble click'); });

Raccourci

En fait le code que nous venons d'écrire est un raccourci équivalent à : $("#divClickable").on("dblclick",function(){ alert ('vous avez effectué un bouble click');});

La méthode on( ) remplace bind( ) et live() (depuis jQuery 1.7) et prend en arguments:

1. le nom de l'événement, ici le "dblclick"
2. la fonction a exécuter lorsque l'événement est déclenché "function(){alert etc.}"

Cette méthode on( ) permet d'attacher un événement à un élément (ici notre divclickable).

Pourquoi je vous explique tout cela ? Ce n'est pas pour le plaisir de mettre un max de contenu dans mon blog ;) mais parce qu'il est possible de détacher ces événements !

Détacher un événement

Pourquoi faire ? Tout simplement parce qu'il peut arriver que vous souhaitiez "désactiver" la prise en charge d'un événement au cours de la navigation dans votre page. Par exemple, si vous souhaitez désactiver un bouton de soumission de formulaire suite au 1er click (pour que les utilisateurs impatients ne puissent pas clicker 10 fois de suite dessus et déclencher autant d'appels à votre serveur).

Il suffit de faire appel à la méthode off( ) (depuis jQuery 1.7, anciennement unbind( ) ):

$("#divClickable").off("dblclick");

Cette fonction, désactive la prise en charge du double click sur notre div.

Subtilités

Il est possible de cibler très finement le champ d'application de ces événement, je vous invite pour cela à visiter la doc officielle.