jQuery Academy · Lektion

Benutzerdefinierte Ereignisse erstellen und auslösen

Benutzerdefinierte Ereignisse erstellen und auslösen ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Einführung in benutzerdefinierte Ereignisse

Willkommen! In dieser Lektion lernen Sie, wie Sie eigene benutzerdefinierte Ereignisse in jQuery erstellen und verwalten. So können Sie Ihren Code übersichtlicher und flexibler gestalten.

Stellen Sie sich benutzerdefinierte Ereignisse als spezielle Nachrichten vor, die verschiedene Teile Ihrer Webanwendung senden und empfangen können. Dadurch können sie kommunizieren, ohne direkt miteinander verknüpft zu sein.

Warum benutzerdefinierte Ereignisse verwenden?

Warum sollten Sie benutzerdefinierte Ereignisse verwenden? Sie helfen bei einem häufigen Problem: der engen Kopplung. Wenn Komponenten eng gekoppelt sind, kann eine Änderung an einem Teil Ihres Codes einen anderen Teil beschädigen.

Entkopplung: Komponenten müssen die interne Funktionsweise der jeweils anderen nicht kennen.
Übersichtlicherer Code: Die Logik für eine bestimmte Aktion wird zentralisiert.
Flexibilität: Sie können Listener einfach hinzufügen oder entfernen, ohne den „Sender“ zu ändern.

Die Methode .trigger()

Um ein benutzerdefiniertes Ereignis zu „senden“ oder „auszulösen“, verwenden wir die jQuery-Methode .trigger(). Sie rufen sie für ein jQuery-Objekt, also ein Element oder document, auf und übergeben den Ereignisnamen als String.

Der Ereignisname kann frei gewählt werden, etwa 'dataLoaded' oder 'itemAdded'.

Demo: Ein Ereignis auslösen

Sehen wir uns .trigger() in Aktion an. Wir lösen bei einem Klick auf einen Button ein benutzerdefiniertes Ereignis namens 'myCustomEvent' aus. Zunächst geschieht nichts, weil niemand darauf hört!

<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>

<script>
$(document).ready(function() {
  $('#triggerButton').on('click', function() {
    // Fire our custom event on the button itself
    $(this).trigger('myCustomEvent');
    console.log('myCustomEvent triggered!');
  });
});
</script>

Mit .on() auf Ereignisse hören

Um ein benutzerdefiniertes Ereignis zu „empfangen“ oder darauf zu „hören“, verwenden wir die bekannte Methode .on(). Wie bei integrierten Ereignissen, etwa 'click', geben Sie den Ereignisnamen und eine Funktion an, die beim Auslösen ausgeführt wird.

Sie können auf demselben Element zuhören, das das Ereignis ausgelöst hat, auf einem übergeordneten Element oder sogar auf dem document selbst, um globale Ereignisse zu verarbeiten.

Beispiel: Ereignis auslösen und darauf hören

Fügen wir nun .trigger() und .on() zusammen. Klicken Sie auf den Button. Daraufhin wird eine Meldung angezeigt, die bestätigt, dass unser benutzerdefiniertes Ereignis sowohl ausgelöst als auch empfangen wurde!

<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>

<script>
$(document).ready(function() {
  // 1. Listen for 'buttonClicked' on the button
  $('#myButton').on('buttonClicked', function() {
    $('#statusMessage').text('Status: Custom event received!');
  });

  // 2. When the button is clicked, trigger 'buttonClicked'
  $('#myButton').on('click', function() {
    $(this).trigger('buttonClicked');
  });
});
</script>

Daten mit Ereignissen übergeben

Benutzerdefinierte Ereignisse sind noch nützlicher, wenn Sie zusammen mit ihnen Daten übergeben können. Nach dem Ereignisnamen können Sie zusätzliche Argumente an .trigger() übergeben. Diese Argumente werden an Ihre Ereignishandler-Funktion weitergereicht.

Das erste Argument im Handler ist immer das Event-Objekt.
Die darauffolgenden Argumente sind die mit .trigger() übergebenen Daten.

Demo: Daten eines benutzerdefinierten Ereignisses

Hier lösen wir ein Ereignis 'dataReady' aus und übergeben einen String sowie ein Objekt. Der Listener empfängt diese Daten und zeigt sie an. So teilen Komponenten Informationen miteinander!

<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>

<script>
$(document).ready(function() {
  // Listen for 'dataReady' and extract the passed data
  $(document).on('dataReady', function(event, message, details) {
    const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`; 
    $('#output').html(outputText);
  });

  // When button clicked, trigger 'dataReady' with data
  $('#loadData').on('click', function() {
    const msg = 'Data successfully loaded!';
    const data = { status: 'complete', item: 'report' };
    $(document).trigger('dataReady', [msg, data]);
    console.log('Data event triggered!');
  });
});
</script>

Entkopplung für bessere Anwendungen

Die Kommunikation über benutzerdefinierte Ereignisse hilft beim Aufbau modularerer und leichter wartbarer Anwendungen. Stellen Sie sich eine Komponente für einen „Warenkorb“ und eine Komponente für die „Produktanzeige“ vor.

Wenn ein Produkt hinzugefügt wird, löst die „Produktanzeige“ 'productAdded' aus.
Die „Warenkorb“-Komponente hört auf 'productAdded' und aktualisiert sich selbst.

Keine der beiden Komponenten muss die internen Methoden der anderen kennen, sondern nur den Ereignisvertrag.

Überprüfen Sie Ihr Verständnis

Welche der folgenden Aussagen beschreiben die Vorteile oder die Verwendung benutzerdefinierter Ereignisse mit .trigger() und .on() korrekt?

Rückblick: Benutzerdefinierte Ereignisse

Sehr gut! Sie haben gelernt, wie Sie benutzerdefinierte Ereignisse in jQuery erstellen und verwalten. Hier eine kurze Zusammenfassung:

Was: Benutzerdefinierte Ereignisse sind benutzerdefinierte Nachrichten für Anwendungskomponenten.
Warum: Sie fördern die Entkopplung und führen dadurch zu übersichtlicherem und flexiblerem Code.
Wie: Verwenden Sie .trigger('eventName', [data]), um ein Ereignis auszulösen.
Wie: Verwenden Sie .on('eventName', function(event, data) { ... }), um auf ein Ereignis zu hören.

Benutzerdefinierte Ereignisse zu beherrschen, ist ein wichtiger Schritt auf dem Weg zu robusten und skalierbaren jQuery-Anwendungen!

Häufig gestellte Fragen

Ist die Lektion „Benutzerdefinierte Ereignisse erstellen und auslösen“ kostenlos?

Ja — der vollständige Text von „Benutzerdefinierte Ereignisse erstellen und auslösen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Benutzerdefinierte Ereignisse erstellen und auslösen“?

Entwerfen und implementieren Sie mit .trigger() und .on() benutzerdefinierte Ereignisse, um Komponenten zu entkoppeln, übersichtlicheren Code zu erstellen und eine flexible Kommunikation zwischen ver… Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „Benutzerdefinierte Ereignisse erstellen und auslösen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Robuste Event-Delegation implementieren
Event-Propagation stoppen
Benutzerdefinierte Ereignisse erstellen und auslösen

← Zurück zu jQuery Academy