OnClick-Funktion in JQuery mit Beispielen erklärt

Eine der schnellen, kleinen und funktionsreichen Bibliotheken in JavaScript ist jQuery. jQuery wird zum Erstellen von HTML-Dokumenten, Ereignisbehandlung, Traversierung und Manipulation usw. verwendet.

Immer wenn auf ein HTML-Element geklickt wird, tritt das jQuery-Click-Event auf. Um die onclick-Funktion in jQuery auszulösen , wird die Methode click() verwendet. Wenn Sie beispielsweise auf einen Absatz in einem Dokument klicken, wird ein Klickereignis durch die Methode $(„p“).click() ausgelöst. Der Benutzer kann eine Funktion an eine Klickmethode anhängen, wann immer ein Klickereignis auftritt, um die Funktion auszuführen. Ein Stück Code wird dabei immer dann ausgeführt, wenn ein Ereignis von click() ausgelöst wird.

Der Mausklick wird durch die Methode HTMLElement.click() simuliert.

Die Click()-Funktion ist eine eingebaute Funktion in jQuery, die ein Klickereignis startet. Immer wenn auf ein relevantes Element geklickt wird, wird ein Ereignis durch eine click()-Methode ausgelöst. Dieses Ereignis löst dann ein Click-Ereignis von Elementen weiter oben in der Dokumentenstruktur (oder Ereigniskette) aus.

Wie der Name schon sagt, ist es einfach das Drücken und Loslassen der Maustaste durch den Benutzer über dem Element.

Ein oder mehrere Event-Handler werden über die on()-Methode an die ausgewählten Elemente angehängt. Beim Klicken auf ein Element tritt ein Ereignis von click() auf. Eine click()-Methode wird ausgeführt, sobald ein click()-Ereignis eintritt. Eine Funktion wird an eine click()-Methode angehängt und ausgeführt. Eine click()-Methode wird mit anderen Ereignissen von jQuery verwendet.

Daher bindet .click() einen Event-Handler an das JavaScript-Event „click“ oder löst ein Event bei einem Element aus. Die Variationen der JavaScript-Onclick- Methode sind:

1. .click(Handler).
2. .click([eventData], Handler).
3. .klicken().

Die erste und die zweite Variante sind eine Kurzform für .on( „click“, handler ) und die Abkürzung für .trigger( „click“ ) in der letzten Variante.

Immer wenn sich ein Mauszeiger über dem Element befindet und die Schaltfläche gedrückt und losgelassen wird, wird das Ereignis click() an dieses Element gesendet. Das Ereignis kann von jedem Element des HTML empfangen werden.

Das Click()-Ereignis kann auch ausgelöst werden, wenn durch den folgenden Code auf das andere Element geklickt wird.

Mit diesem Code wird die Nachricht vom Element alarmiert

Durch die folgenden Ereignisse wird nur ein click()-Ereignis ausgelöst.

• Wenn sich der Mauszeiger innerhalb eines Elements befindet und die Maustaste gedrückt wird.
• Wenn sich der Mauszeiger innerhalb eines Elements befindet und die Maustaste losgelassen wird.

Bevor Sie eine Aktion ausführen, sind die oben genannten Ereignisse normalerweise die gewünschte Reihenfolge. Andernfalls ist das andere geeignete Ereignis das Maus-unten- oder Maus-oben-Ereignis.

Da die Methode .click() die Abkürzung für .on( „click“, handler ) ist, besteht die Möglichkeit der Ablösung durch die Verwendung von .off( „click“ ).

Verwendungszweck

Es gibt zwei Möglichkeiten, die zum Aufrufen einer click() -Methode verwendet werden können:

• Mit einem gegebenen Funktionsargument
• Ohne ein gegebenes Argument

Die onclick-Funktion in jQuery kann in HTML-Elementen wie div, Absätzen, Hyperlinks usw. verwendet werden, um die gewünschte Aufgabe zu erfüllen. Ein Klick ist ein Mausereignis, das beim Drücken der Taste auf der Maus auftritt. Das Ereignis tritt jedoch ein, wenn sich der Mauszeiger innerhalb des Elements befindet.

Syntax:

$(Selektor).click() ; -> Wird zum Auslösen eines Click-Ereignisses für die ausgewählten Elemente verwendet.

$(Selektor).click(Funktion); -> Wird zum Anhängen einer Funktion an ein Klickereignis verwendet.

• Als optionaler Parameter wird die „Funktion“ verwendet, die für die Ausführung beim Auftreten eines Click-Ereignisses verwendet wird.
• Rückgabewert: Das ausgewählte Element wird zurückgegeben, das mit der auszuführenden Funktion angegeben ist.

Implementierung der Methode click()

1. Wenn ein Funktionsargument angegeben wird

Bei dieser Art der Implementierung wird eine Funktion als Eingabe genommen und ausgeführt, wenn die Methode von click() aufgerufen wird.

• Das Schreiben des Codes erfolgt zwischen dem script -Tag und innerhalb des HTML - Hauptteils des Codes.
• Der Aufruf der Funktion erfolgt als h1-Style-Attribut.
• Ein Argument wird mit der Funktion deklariert und separat als Funktion genommen.
• Der Methodenwechsel wird mit diesem Operator mit einer Verzögerung von 1000 ms auf das Objekt angewendet.
• Ein Beispiel der Implementierungsmethode mit einem gegebenen Funktionsargument ist unten gezeigt.

Die Ausgabe des Codes lautet „Wenn Sie auf mich klicken, wird der Text umgeschaltet!“

2. Wenn kein Argument angegeben wird

Die Javascript-onclick- Methode löst ein Der Methode ist bereits ein Element zugeordnet. Daher kann ein Element das Ereignis onclick eines anderen Elements separat aufrufen. Dies kann durch die folgenden Schritte erreicht werden:

1. Ein Objekt muss zuerst mit einem Attribut eines bestimmten Stils deklariert werden, der anklickbar ist. Für das Objekt muss eine Onclick- Aktion deklariert werden.
2. Im Body des Codes soll ein Skriptblock erstellt werden, in dem die Zuordnung der Methode click() zu einem Format anderen Stils, p , erfolgt .
3. Innerhalb des Funktionsaufrufs soll die bereits definierte Methode h1 onclick aufgerufen werden.
4. Dieselbe onclick-Methode wird dann für ein Attribut aufgerufen.
5. Ein Beispiel für einen Code, der die Implementierung einer click()-Methode ohne ein gegebenes Argument zeigt, ist unten gezeigt.

Die Ausgabe des Codes lautet „Wenn Sie auf mich klicken, wird ein Alarm ausgelöst!“.

• • Viele Ereignisse können in der $.on-Methode verwendet werden, wie z. B. dblclick, change und andere.

3. Rendern einer HTML-Schaltfläche und Hinzufügen von Text zur Seite beim Klicken auf die Schaltfläche. Die Click()-Methode wird am häufigsten an eine Schaltfläche angehängt, sie kann jedoch an alle anderen Elemente auf einer Webseite angehängt werden.

• • Eine einfache Schaltfläche wird mit der ID „btn-primary“ gerendert, die sich in einem <div> mit der ID „main.
  • Durch den Code sollen neue Inhalte nach dem Klick auf den Button mit einer Klasse „neuer Inhalt“ im <p>-Tag angezeigt werden.
  • Die jQuery ist in den <script>-Tags eingeschlossen.

• • Die Methode click() wird an die ID der Schaltfläche angehängt und ein Argument wird als Rückruffunktion verwendet, die eine anonyme Funktion ist.
  • Der String „Button clicked“ wird von der Callback-Funktion zurückgegeben.

• • Eine Funktion ohne Namen wird einfach als anonyme Funktion bezeichnet und als Callbacks als Argumente einer Methode verwendet. Die anonymen Funktionen und die Callback-Methoden bilden den Grundstein für den Aufbau beliebiger responsiver Websites und Anwendungen.

• • Der Code beginnt mit der Schaltfläche innerhalb des <div> „main“.
  • Sobald auf die Schaltfläche geklickt wird, wird die Callback-Funktion von der Ereignisbehandlungsroutine aufgerufen, da die Methode click() an die Schaltflächenauswahl angehängt wird.
  • Die Zeichenfolge „Schaltfläche angeklickt“ wird angezeigt.
  • Der obige Code rendert den Inhalt nur einmal, aber um die Zeichenfolge jedes Mal anzuzeigen, wenn auf den Code geklickt wird, wird append() anstelle von HTML() verwendet.

• • Es wird die Zeichenfolge dreimal als neuen Inhalt innerhalb des <p>-Tags erzeugen.
  • Die Callback-Funktion wird bei jedem Klick auf die Schaltfläche aufgerufen.

Fazit

Die Funktionsweise der onclick-Funktion in jquery wurde in dem Artikel zusammen mit ihren Verwendungen und Beispielen besprochen. Mit nur wenigen Codezeilen können Webseitenfunktionen über die JavaScript-Onclick- Methode erstellt werden.

Wenn Sie mehr über Webentwicklung erfahren und sich in anderen verwandten Bereichen spezialisieren möchten, können Sie den von upGrad angebotenen Studiengang „ Master of Science in Informatik “ besuchen. Der Kurs wurde speziell für Berufseinsteiger (sowohl Männer als auch Frauen im Alter von 21 bis 45 Jahren) entwickelt und wird auf einer Online-Plattform mit Live-Sitzungen angeboten, um Langstreckenpendlern die Arbeit zu erleichtern. Mit über 30 Projekten und Aufgaben erhält der Student die Vorteile des IIIT-Bangalore- und LJMU-Alumni-Status . Zögern Sie nicht, unser Team zu kontaktieren, wenn Sie Hilfe benötigen.