jQuery.click() – Klickereignisse auf Elementen abfangen

Anstatt komplexe Event-Handler zu schreiben, können Sie Funktionen mithilfe von jQuery.click() ganz einfach an Klickereignisse auf HTML-Elementen binden. Dadurch wird der Quelltext kompakter und übersichtlicher.

Was ist die jQuery.click()-Methode?

Indem man die jQuery.click()-Methode auf ein bestimmtes HTML-Element anwendet und eine Funktion als Argument übergibt, wird diese aufgerufen, wenn das entsprechende Element geklickt wird. Diese Funktion kann in diesem Kontext verwendet werden, um gewünschte Aktionen auszuführen, wie zum Beispiel:

• Ändern von Elementeigenschaften durch jQuery.addClass()
• Auslösen anderer Ereignisse
• Laden von Inhalten per AJAX mit jQuery.ajax()

jQuery.click() lässt sich auch effektiv mit Schleifen-Funktionen wie jQuery.each() kombinieren.

Wie sieht die Syntax der jQuery.click()-Methode aus?

Die Syntax von jQuery.click() lautet folgendermaßen:

$(selector).click(function);

function ist in diesem Fall ein optionaler Parameter, der ausgeführt wird, wenn ein Klickereignis auftritt.

Wenn Sie Ihre Grundkenntnisse zu jQuery auffrischen wollen, können Sie in unser jQuery-Tutorial schauen. Darin finden Sie alle Informationen zu Syntax und Selektoren.

Was ist der Unterschied zwischen jQuery.click() und .onClick?

Der Unterschied zwischen jQuery.click und .onClick besteht in erster Linie darin, dass jQuery.click() eine Methode der jQuery-Bibliothek ist, während .onClick als Event-Handler ein Teil der nativen JavaScript-DOM-API ist. Er wird direkt auf dem DOM-Element verwendet und erfordert die Angabe einer Funktion, die bei einem Event aufgerufen wird. Die Syntax hat die Form element.onClick = handler, wobei element das DOM-Element und handler die Funktion ist, die bei einem Klickereignis ausgeführt wird.

Ein weiterer Unterschied ist, dass die jQuery.click()-Funktion bestimmte Vorteile bietet, die über die native .onClick-Methode hinausgehen. Dazu gehören die Vereinfachung der Code-Schreibweise, eine verbesserte Browserkompatibilität und die Möglichkeit, auf dynamisch hinzugefügte Elemente zu reagieren.

Ein Beispiel für die Anwendung von jQuery.click()

Das folgende Klick-Event jQuery.click() button lässt beim Klicken des Elements ein Popup-Fenster mit dem Text The button was clicked erscheinen.

$("button").click(function(){
    alert("The button was clicked.");
});