jQuery.click() : comptabiliser les évènements de clic sur différents éléments

Ne prenez plus la peine d’écrire des gestionnaires d’évènements complexes : liez facilement des fonctionnalités à des évènements de clic sur vos éléments HTML en utilisant la méthode jQuery.click(). Vous obtiendrez alors un texte source plus compact et plus clair.

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

En appliquant la méthode jQuery.click() à un élément HTML spécifique et en lui transmettant une fonction en tant qu’argument, celle-ci sera appelée pas un clic sur l’élément correspondant. Il est donc possible d’utiliser la fonction dans ce contexte, afin de réaliser les actions souhaitées, parmi lesquelles :

• la modification des propriétés de l’élément par la méthode jQuery.addClass() ;
• le déclenchement d’autres évènements ;
• le chargement 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 correspond à un paramètre facultatif, qui s’exécute à chaque évènement de clic.

Vous voulez dépoussiérer vos notions de base sur jQuery ? Pour ce faire, consultez notre tutoriel jQuery. Celui-ci contient toutes les informations dont vous avez besoin sur la syntaxe et les sélecteurs.

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

La différence entre les méthodes jQuery.click et jQuery.onClick se traduit avant tout par le fait que jQuery.click() correspond à une méthode de la bibliothèque jQuery, tandis que jQuery.onClick prend la forme d’un gestionnaire d’évènements et fait partie de l’API DOM native de JavaScript. Celle-ci s’utilise directement sur l’élément DOM, et il est nécessaire d’indiquer la fonction qui sera appelée lors d’un évènement. La syntaxe correspondante prend la forme element.onClick = handler, dans laquelle element correspond à l’élément DOM et handler à la fonction exécutée à chaque évènement de clic.

Les deux méthodes sont également différentes dans le sens où la fonction jQuery.click() offre des avantages qui surpassent ceux de la fonction jQuery.onClick native. Ces avantages comprennent notamment la simplification de l’écriture du code, une meilleure compatibilité avec le navigateur et la possibilité de réagir à des éléments ajoutés de manière dynamique.

Exemple d’application de la méthode jQuery.click()

L’évènement de clic jQuery.click() button ci-dessous fait apparaître une fenêtre contextuelle affichant le message « Un clic a été effectué sur le bouton » lorsque cela se produit effectivement sur l’élément.

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