Fonction OnClick dans JQuery expliquée avec des exemples

L'une des bibliothèques rapides, petites et riches en fonctionnalités de JavaScript est jQuery. jQuery est utilisé pour créer des documents HTML, gérer des événements, parcourir et manipuler, etc.

Chaque fois qu'un élément HTML est cliqué, il y a l'occurrence de l'événement de clic jQuery. Pour déclencher la fonction onclick dans jQuery , la méthode click() est utilisée. Par exemple, en cliquant sur un paragraphe d'un document, un événement click sera déclenché par la méthode $(“p”).click(). L'utilisateur peut attacher une fonction à une méthode de clic chaque fois qu'un événement de clic se produit pour exécuter la fonction. Un morceau de code est ainsi exécuté chaque fois qu'un événement click() est déclenché.

Le clic de la souris est simulé via la méthode HTMLElement.click().

La fonction Click() est une fonction intégrée dans jQuery qui démarre un événement click. Chaque fois qu'un élément pertinent est cliqué, un événement est déclenché par une méthode click(). Cet événement déclenche alors un événement de clic sur les éléments situés plus haut dans l'arborescence du document (ou la chaîne d'événements).

Comme son nom l'indique, il s'agit simplement d'appuyer et de relâcher le bouton de la souris par l'utilisateur sur l'élément.

Un ou plusieurs gestionnaires d'événements sont attachés aux éléments sélectionnés via la méthode on(). En cliquant sur un élément, un événement click() se produit. Une méthode click() est exécutée une fois qu'un événement click() se produit. Une fonction est attachée à une méthode click() et exécutée. Une méthode click() est utilisée avec d'autres événements de jQuery.

Par conséquent, .click() lie un gestionnaire d'événements à l'événement JavaScript "click", ou déclenche un événement sur un élément. Les variantes de la méthode JavaScript onclick sont :

1. .click( gestionnaire ).
2. .click( [eventData ], gestionnaire ).
3. .Cliquez sur().

Les première et deuxième variantes sont une forme abrégée pour .on( "click", handler ) et le raccourci pour .trigger( "click" ) dans la dernière variante.

Chaque fois qu'un pointeur de souris est sur l'élément et que le bouton est enfoncé et relâché, l'événement click() est alors envoyé à cet élément. L'événement peut être reçu par n'importe quel élément du HTML.

L'événement Click() peut également être déclenché si l'autre élément est cliqué via le code suivant.

Avec ce code, le message sera alerté par l'élément

À travers les événements suivants, seul un événement click() est déclenché.

• Lorsque le pointeur d'une souris se trouve à l'intérieur d'un élément et que le bouton de la souris est enfoncé.
• Lorsque le pointeur d'une souris se trouve à l'intérieur d'un élément et que le bouton de la souris est relâché.

Avant de prendre une action, les événements mentionnés ci-dessus sont généralement la séquence souhaitée. Sinon, l'autre événement approprié est l'événement mouse down ou mouse up.

Étant donné que la méthode .click() est le raccourci pour .on( "click", handler ), la possibilité de se détacher est présente grâce à l'utilisation de .off( "click" ).

Usage

Il existe deux façons d'appeler une méthode click() :

• Avec un argument de fonction donné
• Sans argument donné

La fonction onclick de jQuery peut être utilisée dans des éléments HTML tels que div, paragraphes, hyperliens, etc. pour accomplir la tâche souhaitée. Un clic est un événement de souris qui se produit lors de l'enfoncement du bouton de la souris. Cependant, l'événement se produira si le pointeur d'une souris se trouve dans l'élément.

Syntaxe:

$(sélecteur).click() ; -> utilisé pour déclencher un événement de clic pour les éléments sélectionnés.

$(sélecteur).click(fonction); -> utilisé pour attacher une fonction à un événement de clic.

• Le paramètre optionnel utilisé est la "fonction" qui est utilisée pour l'exécution lors de l'occurrence d'un événement de clic.
• Valeur de retour : L'élément sélectionné est retourné qui est spécifié avec la fonction à exécuter.

Implémentation de la méthode click()

1. Lorsqu'un argument de fonction est donné

Dans ce type d'implémentation, une fonction est prise en entrée et est exécutée chaque fois que la méthode click() est appelée.

• L'écriture du code se fait entre la balise de script et dans le corps HTML du code.
• L'appel de la fonction se fait en tant qu'attribut de style h1.
• Un argument est déclaré avec la fonction et est pris comme une fonction séparément.
• La méthode bascule est appliquée sur l'objet à l'aide de cet opérateur avec un délai de 1000 ms.
• Un exemple de la méthode d'implémentation avec un argument de fonction donné est présenté ci-dessous.

La sortie du code sera "Cliquer sur moi fera basculer le texte!"

2. Quand aucun argument n'est donné

La méthode javascript onclick déclenche un événement Un élément est déjà affecté à la méthode. Par conséquent, un élément peut appeler l'événement onclick d'un autre élément séparément. Ceci peut être réalisé par les étapes suivantes :

1. Un objet doit d'abord être déclaré avec un attribut d'un style particulier cliquable. Une action onclick doit être déclarée pour l'objet.
2. Un bloc de script est à créer dans le corps du code où l'attribution de la méthode click() se fait à un format de style différent, p .
3. La méthode h1 onclick déjà définie doit être appelée dans l'appel de la fonction.
4. La même méthode onclick est alors appelée pour un attribut.
5. Un exemple de code montrant l'implémentation d'une méthode click() sans argument donné est présenté ci-dessous.

La sortie du code est "Cliquer sur moi appellera une alerte!".

• • De nombreux événements peuvent être utilisés dans la méthode $.on comme dblclick, change et autres.

3. Affichage d'un bouton HTML et ajout de texte à la page en cliquant sur le bouton. La méthode click() est le plus souvent attachée à un bouton, cependant, elle peut être attachée à tout autre élément d'une page Web.

• • Un bouton de base est rendu avec un identifiant de "btn-primary" qui est à l'intérieur d'un <div> avec un identifiant de "main.
  • Grâce au code, le nouveau contenu doit être affiché avec une classe de "nouveau contenu" dans la balise <p> après avoir cliqué sur le bouton.
  • Le jQuery est inclus dans les balises <script>.

• • La méthode click() est attachée à l'identifiant du bouton et un argument est pris comme une fonction de rappel qui est une fonction anonyme.
  • La chaîne "Bouton cliqué" est renvoyée par la fonction de rappel.

• • Une fonction sans nom est simplement qualifiée de fonction anonyme et utilisée comme rappels comme arguments d'une méthode. Pour créer des sites Web et des applications réactifs, les fonctions anonymes et les méthodes de rappel constituent la pierre angulaire.

• • Le code commencera par le bouton à l'intérieur du <div> "main".
  • Une fois que le bouton est cliqué, la fonction de rappel sera appelée par le gestionnaire d'événements car la méthode click() est attachée au sélecteur de bouton.
  • La chaîne "Bouton cliqué" s'affichera.
  • Le code ci-dessus ne rendra le contenu qu'une seule fois, cependant pour afficher la chaîne chaque fois que le code est cliqué, append() est utilisé à la place de HTML().

• • Il produira la chaîne trois fois comme nouveau contenu à l'intérieur de la balise <p>.
  • La fonction de rappel est appelée à chaque clic sur le bouton.

Conclusion

Le fonctionnement de la fonction onclick dans jquery a été discuté dans l'article avec ses utilisations et exemples. Avec seulement quelques lignes de code, la fonctionnalité de la page Web peut être créée via la méthode JavaScript onclick .

Si vous avez envie d'en savoir plus sur le développement Web et de vous spécialiser dans d'autres domaines connexes, vous pouvez consulter le cours " Master of Science in Computer Science " proposé par upGrad . Spécialement conçu pour les professionnels débutants (hommes et femmes de 21 à 45 ans), le cours se déroulera sur une plateforme en ligne avec des sessions en direct, pour la facilité des navetteurs longue distance. Avec plus de 30 projets et missions, l'étudiant bénéficiera des avantages du statut d'ancien élève de l' IIIT-Bangalore et du LJMU . N'hésitez pas à contacter notre équipe pour toute assistance.