Button-Klick-Ereignis in jQuery handhaben

Im heutigen Beitrag erfahren wir etwas über das Button-click-Event in jQuery.

Behandeln Sie das Ereignis click des Buttons in jQuery

jQuery hat einen integrierten .click()-Ansatz, der einen Event-Handler an das JavaScript-Event click bindet oder dieses Event auf ein Element auslöst.

Syntax:

.click(handler).click([eventData], handler)

1. Der handler ist eine Funktion, die jedes Mal ausgeführt wird, wenn das Ereignis ausgelöst wird.
2. Die Ereignisdaten sind ein Objekt, das Daten enthält, die vom Ereignisbehandler zu überholen sind.

Diese Methode ist eine Abkürzung für .on("click", handler ) in den ersten beiden Varianten und .trigger( "click" ) in der dritten. Das Ereignis click wird an ein Element gesendet, während sich der Mauszeiger über dem Element befindet und die Maustaste gedrückt und gestartet wird.

Jedes HTML-Element kann dieses Ereignis empfangen. Da die Methode .click() nur eine Abkürzung für .on("click", handler ) ist, kann sie mit .off("click") getrennt werden.

Das Ereignis Klick wird nur nach genau dieser Reihe von Ereignissen versendet:

1. Die Maustaste wird gedrückt, während sich der Mauszeiger über dem Element befindet.
2. Die Maustaste wird losgelassen, während sich der Mauszeiger über dem Element befindet.

Dies ist normalerweise die gewünschte Reihenfolge, bevor eine Aktion ausgeführt wird. Wenn dies nicht erforderlich ist, ist das Ereignis mousedown oder mouseup möglicherweise besser geeignet.

Lassen Sie es uns anhand des folgenden Beispiels verstehen:

<button id="btn">Hello World!</button>

$('#btn').click(() => {console.log('Click event fired')});

Im obigen Beispiel haben wir das Element button definiert. Das Event click wird abgesetzt und die Funktion ausgeführt, sobald auf die Schaltfläche geklickt wird.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt. Es wird das folgende Ergebnis angezeigt:

Ausgabe:

Click event fired

Sehen Sie die Demo hier.