jQuery.on() – So binden Sie Event-Handler
IONOS Redaktion3 mins
Die jQuery.on()-Methode bietet eine vereinfachte und konsistente Syntax zur Event-Verarbeitung und ist daher bei der Entwicklung interaktiver Webanwendungen weit verbreitet. Wir stellen Ihnen die Syntax und praktische Anwendungsbeispiele der Funktion vor.
Was ist die jQuery.on()-Methode?
jQuery.on() kann Event-Handler für bestimmte Ereignisse an Elemente binden. Es wird in der Webentwicklung eingesetzt, um auf Benutzerinteraktionen zu reagieren und Funktionen aufzurufen. Mit jQuery.on() können Event-Handler für Ereignisse wie Klicks, Tastatureingaben, Mausbewegungen, Formulareingaben und viele weitere definiert werden. Des Weiteren ermöglicht Ihnen die Event-Delegation, Event-Handler auf Elemente zu binden, auch wenn diese zur Laufzeit hinzugefügt oder entfernt werden. Der für das Event auszuführende Code könnte zum Beispiel das Hinzufügen einer Klasse mit jQuery.addClass() sein. Aber auch das Lokalisieren von Elementen durch jQuery.find() ist möglich. Iterationen können Sie mit der Schleifen-Funktion jQuery.each() im Funktionsblock durchführen. Die Methoden zur Event-Verarbeitung lassen sich zudem bequem mit jQuery in WordPress integrieren.
Mit Webspace von IONOS erhalten Sie über 50 GB Speicherplatz für Ihre Webprojekte inklusive eines kostenlosen SSL-Wildcard-Zertifikats für eine sichere Kommunikation. Bereits ab 7 € im Monat können Sie Ihr persönliches Hosting-Paket buchen. Entscheiden Sie sich für das zuverlässige Webspace-Angebot von IONOS und geben Sie Ihren Webprojekten einen soliden Grundstein.
Wie sehen die Syntax und Parameter der jQuery.on()-Methode aus?
Die Syntax von jQuery.on() lautet konkret:
$(selector).on(event, childSelector, data, function, map)- event: Der Name des Ereignisses, auf das der Event-Handler reagieren soll, zum Beispiel “click”, “keydown”, “submit” usw.
- childSelector: ist optional und ein CSS-Selektor, der angibt, welche untergeordneten Elemente das Ereignis auslösen sollen
- data: optionale zusätzliche Daten, die dem Event-Handler übergeben werden
- function: die Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird
- map: ermöglicht das Binden mehrerer Ereignisse und ihrer Event-Handler in einem einzigen Aufruf durch Verwendung eines Objekt-Mappings
Weitere Informationen zu Schreibweisen und Funktionen finden Sie in unserem jQuery-Tutorial aus unserem Ratgeber.
Durch die Nutzung der leistungsstarken IONOS API können Sie Ihre Arbeitsabläufe beschleunigen und effizienter gestalten. Die API gibt Ihnen die Möglichkeit, Ressourcen zu erstellen und zu konfigurieren. Durch die Automatisierung sparen Sie nicht nur wertvolle Zeit, sondern minimieren auch potenzielle Fehlerquellen.
Ein Beispiel für die Anwendung von jQuery.on()
Sie können mit der Methode jQuery.on() Events binden und bestimmten Code bei der Auslösung ausführen. Im Folgenden stellen wir Ihnen die Verarbeitung eines Klickereignisses vor:
$('#myButton').on('click', function() {
console.log('Button wurde geklickt!');
});In diesem Beispiel wird der Event-Handler für das Klickereignis an das Button-Element mit der ID “myButton” gebunden. Wenn Sie den Button klicken, wird die Event-Handler-Funktion ausgeführt und eine Meldung “Button wurde geklickt!” in der Konsole ausgegeben. Durch die Verwendung von jQuery.on() können Sie auch weitere Ereignisse wie “mouseover”, “keydown” oder “submit” behandeln und entsprechende Funktionen für jedes Ereignis definieren.
Deploy Now von IONOS ist eine einfache und unkomplizierte Art, Ihre Website live zu schalten. Sie profitieren von einem schnellen Staging mit Vorschau-URL. Die benutzerfreundliche Oberfläche und die intelligente Erkennung von Frameworks erleichtern Ihnen dabei effektiv den Einrichtungsprozess.
