jQuery.click() : comp­ta­bi­li­ser les évè­ne­ments de clic sur dif­fé­rents éléments

Ne prenez plus la peine d’écrire des ges­tion­naires d’évè­ne­ments complexes : liez fa­ci­le­ment des fonc­tion­na­li­tés à des évè­ne­ments de clic sur vos éléments HTML en utilisant la méthode jQuery.click(). Vous ob­tien­drez alors un texte source plus compact et plus clair.

Méthode jQuery.click() : de quoi s’agit-il ?

En ap­pli­quant la méthode jQuery.click() à un élément HTML spé­ci­fique et en lui trans­met­tant une fonction en tant qu’argument, celle-ci sera appelée pas un clic sur l’élément cor­res­pon­dant. Il est donc possible d’utiliser la fonction dans ce contexte, afin de réaliser les actions sou­hai­tées, parmi les­quelles :

• la mo­di­fi­ca­tion des pro­prié­tés de l’élément par la méthode jQuery.addClass() ;
• le dé­clen­che­ment d’autres évè­ne­ments ;
• le char­ge­ment de contenu à l’aide de méthodes jQuery.ajax().

La méthode jQuery.click() peut aussi être combinée de manière efficace avec des fonctions en boucle comme jQuery.each().

À quoi ressemble la syntaxe de la méthode jQuery.click() ?

La syntaxe de la méthode jQuery.click() se présente comme suit :

$(selector).click(function);

Dans ce contexte, function cor­res­pond à un paramètre fa­cul­ta­tif, qui s’exécute à chaque évènement de clic.

Vous voulez dé­pous­sié­rer vos notions de base sur jQuery ? Pour ce faire, consultez notre tutoriel jQuery. Celui-ci contient toutes les in­for­ma­tions dont vous avez besoin sur la syntaxe et les sé­lec­teurs.

Quelle est la dif­fé­rence entre les méthodes jQuery.click() et .onClick ?

La dif­fé­rence entre les méthodes jQuery.click et jQuery.onClick se traduit avant tout par le fait que jQuery.click() cor­res­pond à une méthode de la bi­blio­thèque jQuery, tandis que jQuery.onClick prend la forme d’un ges­tion­naire d’évè­ne­ments et fait partie de l’API DOM native de Ja­vaS­cript. Celle-ci s’utilise di­rec­te­ment sur l’élément DOM, et il est né­ces­saire d’indiquer la fonction qui sera appelée lors d’un évènement. La syntaxe cor­res­pon­dante prend la forme element.onClick = handler, dans laquelle element cor­res­pond à l’élément DOM et handler à la fonction exécutée à chaque évènement de clic.

Les deux méthodes sont également dif­fé­rentes dans le sens où la fonction jQuery.click() offre des avantages qui sur­pas­sent ceux de la fonction jQuery.onClick native. Ces avantages com­pren­nent notamment la sim­pli­fi­ca­tion de l’écriture du code, une meilleure com­pa­ti­bi­lité avec le na­vi­ga­teur et la pos­si­bi­lité de réagir à des éléments ajoutés de manière dynamique.

Exemple d’ap­pli­ca­tion de la méthode jQuery.click()

L’évènement de clic jQuery.click() button ci-dessous fait ap­pa­raître une fenêtre con­tex­tuelle affichant le message « Un clic a été effectué sur le bouton » lorsque cela se produit ef­fec­ti­ve­ment sur l’élément.

$("button").click(function(){
    alert("Un clic a été effectué sur le bouton.");
});