Gérer l'événement de clic sur le bouton dans jQuery

Shraddha Paghdar 12 octobre 2023
Gérer l'événement de clic sur le bouton dans jQuery

Dans l’article d’aujourd’hui, nous allons en apprendre davantage sur l’événement de bouton click dans jQuery.

Gérer l’événement click du bouton dans jQuery

jQuery a une approche intégrée .click() qui lie un gestionnaire d’événements à l’événement JavaScript click ou distribue cet événement sur un élément.

Syntaxe:

.click(handler).click([eventData], handler)
  1. Le handler est une fonction exécutée à chaque déclenchement de l’événement.
  2. Les eventData sont un objet contenant des données à dépasser par le gestionnaire d’événements.

Cette méthode est une abréviation de .on("click", handler ) dans les deux premières variantes et .trigger( "click" ) dans la troisième. L’événement click est envoyé à un élément pendant que le pointeur de la souris est sur l’élément, et que le bouton de la souris est enfoncé et lancé.

Tout élément HTML peut recevoir cet événement. Comme la méthode .click() n’est qu’une abréviation de .on("click", handler ), elle peut être séparée par .off("click").

L’événement click n’est envoyé qu’après cette série d’événements :

  1. Le bouton de la souris est enfoncé alors que le pointeur de la souris est sur l’élément.
  2. Le bouton de la souris est relâché pendant que le pointeur de la souris se trouve sur l’élément.

Il s’agit généralement de la séquence souhaitée avant d’effectuer une action. Si ce n’est pas nécessaire, l’événement mousedown ou mouseup peut être plus approprié.

Comprenons-le avec l’exemple suivant:

<button id="btn">Hello World!</button>
$('#btn').click(() => {console.log('Click event fired')});

Dans l’exemple ci-dessus, nous avons défini l’élément button. L’événement click est envoyé, et la fonction est exécutée dès que le bouton est cliqué.

Essayez d’exécuter l’extrait de code ci-dessus dans n’importe quel navigateur prenant en charge jQuery. Il va afficher le résultat ci-dessous :

Production:

Click event fired

Voir la démo ici.

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

Article connexe - jQuery Event