8.1 Erstellen von benutzerdefinierten Ereignissen
Benutzerdefinierte Ereignisse (oder Custom Events) in JavaScript ermöglichen Entwicklern das Erstellen und Auslösen eigener Ereignisse, was nützlich sein kann, um Informationen zu übermitteln und die Interaktion zwischen verschiedenen Teilen einer Anwendung zu verbessern. Das Erstellen und Verwenden von benutzerdefinierten Ereignissen kann die Struktur und Flexibilität deines Codes verbessern, indem es eine Möglichkeit bietet, den Zustand der Anwendung zu informieren und zu steuern.
Zur Erstellung benutzerdefinierter Ereignisse wird der Konstruktor CustomEvent verwendet. Mit diesem Konstruktor können neue Ereignisse mit konfigurierbaren Parametern und zusätzlichen Daten erstellt werden.
Syntax:
const event = new CustomEvent(type, {detail: additionalData});Wo:
type: ein String, der den Namen des Ereignisses repräsentiertdetail: ein Objekt, das zusätzliche Daten enthält, die mit dem Ereignis übermittelt werden
Beispiel zur Erstellung eines benutzerdefinierten Ereignisses:
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });8.2 Auslösen benutzerdefinierter Ereignisse
Das Auslösen eines Ereignisses erfolgt mit der Methode dispatchEvent. Diese Methode wird auf dem Element aufgerufen, auf dem das Ereignis auftreten soll.
Erklärung:
- Ein Event-Handler für das Ereignis
myCustomEventwird dem ButtonmyButtonhinzugefügt, welcher die Nachricht aus den Ereignisdaten in die Konsole ausgibt - Ein benutzerdefiniertes Ereignis
myCustomEventwird mit einer Nachricht imdetailerstellt - Das Ereignis wird bei dem Button
myButtonausgelöst, was den Handler aktiviert und die Nachricht in die Konsole ausgibt
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Button</button>
<script>
const button = document.getElementById('myButton');
// Hinzufügen eines Handlers für das benutzerdefinierte Ereignis
button.addEventListener('myCustomEvent', function(event) {
console.log('Custom event received:', event.detail.message);
});
// Erstellen und Auslösen des benutzerdefinierten Ereignisses
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>8.3 Anwendung benutzerdefinierter Ereignisse
Benutzerdefinierte Ereignisse sind nützlich für die Erstellung modulareren und wartbareren Codes, besonders bei der Arbeit mit Komponenten und komplexen Anwendungen. Sie ermöglichen es einer Komponente, andere Komponenten über Änderungen oder Aktionen zu informieren.
Erklärung:
- Modul A löst das benutzerdefinierte Ereignis
notifyBauf dem ElementmoduleBaus und übermittelt Daten - Modul B hört auf das Ereignis
notifyBund verarbeitet es, indem es eine Nachricht in die Konsole ausgibt
Beispiel zur Verwendung benutzerdefinierter Ereignisse in einer modularen Anwendung:
<!DOCTYPE html>
<html>
<head>
<title>Module Communication Example</title>
</head>
<body>
<div id="moduleA">Module A</div>
<div id="moduleB">Module B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Modul A löst das benutzerdefinierte Ereignis aus
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Data from Module A' } });
moduleB.dispatchEvent(event);
}
// Modul B hört auf das benutzerdefinierte Ereignis
moduleB.addEventListener('notifyB', function(event) {
console.log('Module B received:', event.detail.message);
});
// Simulation einer Aktion in Modul A
notifyModuleB();
</script>
</body>
</html>8.4 Parameter von benutzerdefinierten Ereignissen
Benutzerdefinierte Ereignisse können mit den folgenden Parametern zusätzlich konfiguriert werden:
bubbles: ein boolescher Wert, der angibt, ob das Ereignis bubblen soll. Standardmäßigfalsecancelable: ein boolescher Wert, der angibt, ob das Ereignis abgebrochen werden kann. Standardmäßigfalsecomposed: ein boolescher Wert, der angibt, ob das Ereignis über Schatten-DOM-Grenzen hinaus verbreiten soll. Standardmäßigfalse
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Parameters Example</title>
</head>
<body>
<div id="container">
<button id="myButton">Button</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// Hinzufügen von Handlers für den Container und den Button
container.addEventListener('customEvent', function(event) {
console.log('Container received:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button received:', event.detail.message);
});
// Erstellen und Auslösen des benutzerdefinierten Ereignisses mit Parametern
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Hello from button' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>