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.