jQuery.click() – Kli­ck­ereig­nis­se auf Elementen abfangen

Anstatt komplexe Event-Handler zu schreiben, können Sie Funk­tio­nen mithilfe von jQuery.click() ganz einfach an Kli­ck­ereig­nis­se auf HTML-Elementen binden. Dadurch wird der Quelltext kompakter und über­sicht­li­cher.

Was ist die jQuery.click()-Methode?

Indem man die jQuery.click()-Methode auf ein be­stimm­tes HTML-Element anwendet und eine Funktion als Argument übergibt, wird diese auf­ge­ru­fen, wenn das ent­spre­chen­de Element geklickt wird. Diese Funktion kann in diesem Kontext verwendet werden, um ge­wünsch­te Aktionen aus­zu­füh­ren, wie zum Beispiel:

• Ändern von Ele­ment­ei­gen­schaf­ten durch jQuery.addClass()
• Auslösen anderer Er­eig­nis­se
• Laden von Inhalten per AJAX mit jQuery.ajax()

jQuery.click() lässt sich auch effektiv mit Schleifen-Funk­tio­nen wie jQuery.each() kom­bi­nie­ren.

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

Die Syntax von jQuery.click() lautet fol­gen­der­ma­ßen:

$(selector).click(function);

function ist in diesem Fall ein op­tio­na­ler Parameter, der aus­ge­führt wird, wenn ein Kli­ck­ereig­nis auftritt.

Wenn Sie Ihre Grund­kennt­nis­se zu jQuery auf­fri­schen wollen, können Sie in unser jQuery-Tutorial schauen. Darin finden Sie alle In­for­ma­tio­nen zu Syntax und Se­lek­to­ren.

Was ist der Un­ter­schied zwischen jQuery.click() und .onClick?

Der Un­ter­schied zwischen jQuery.click und .onClick besteht in erster Linie darin, dass jQuery.click() eine Methode der jQuery-Bi­blio­thek ist, während .onClick als Event-Handler ein Teil der nativen Ja­va­Script-DOM-API ist. Er wird direkt auf dem DOM-Element verwendet und erfordert die Angabe einer Funktion, die bei einem Event auf­ge­ru­fen wird. Die Syntax hat die Form element.onClick = handler, wobei element das DOM-Element und handler die Funktion ist, die bei einem Kli­ck­ereig­nis aus­ge­führt wird.

Ein weiterer Un­ter­schied ist, dass die jQuery.click()-Funktion bestimmte Vorteile bietet, die über die native .onClick-Methode hin­aus­ge­hen. Dazu gehören die Ver­ein­fa­chung der Code-Schreib­wei­se, eine ver­bes­ser­te Brow­ser­kom­pa­ti­bi­li­tät und die Mög­lich­keit, auf dynamisch hin­zu­ge­füg­te 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 er­schei­nen.

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