JavaScript: CustomEvent und DispatchEvent verstehen

In diesem Artikel werde ich versuchen zu erklären, wie wir Ereignisse mit Event, CustomEventKonstruktoren und dispatchEvent()Methoden erstellen und versenden können. Wir werden auch untersuchen, wie und für welche Zwecke benutzerdefinierte Ereignisse und DispatchEvent in unseren Projekten verwendet werden.

Ich hoffe, dass Sie am Ende dieses Artikels in der Lage sein werden, benutzerdefinierte Ereignisse zu erstellen.

Also lasst uns anfangen!

Eine Webanwendung besteht aus einer Reihe von Ereignissen, und wir können sagen, dass diese Ereignisse einer der wichtigsten Bestandteile einer Webanwendung sind.

In einigen Fällen erfüllen standardmäßige JavaScript-Ereignisse unsere Anforderungen nicht. Beispielsweise verwenden wir in unseren Anwendungen einige benutzerdefinierte Ereignisse, die in Standard-JavaScript-Ereignissen nicht verfügbar sind, um Benachrichtigungen hinzuzufügen, einige Daten zu aktualisieren usw. Wir werden uns diese im Rest des Artikels ansehen.

Wie können wir benutzerdefinierte Ereignisse erstellen?

Es gibt zwei Möglichkeiten, benutzerdefinierte Ereignisse zu erstellen.

• Die erste Möglichkeit ist die Verwendung eines Event - Konstruktors.
• Die zweite Möglichkeit ist die Verwendung des CustomEvent- Konstruktors, den wir bevorzugen.

Ereigniskonstruktor

Sie können benutzerdefinierte Ereignisse mit dem Ereigniskonstruktor wie folgt erstellen:

Bitte beachten Sie, dass bei Veranstaltungsnamen die Groß-/Kleinschreibung nicht beachtet wird. Also NOTIFICATION_ADD ist dasselbe wie Notification_Add oder notification_add .

const event = new Event('NOTIFICATION_ADD');

Wie oben erwähnt, können wir den CustomEvent-Konstruktor wie folgt verwenden, wenn wir dem Ereignisobjekt weitere Daten hinzufügen möchten:

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

Nun, das Ereignis wurde erstellt. Was kommt als nächstes? Natürlich wollen wir es in unserem Projekt verwenden. Der letzte Schritt zum Auslösen eines Ereignisses ist das Aufrufen der Methode dispatchEvent(). Es akzeptiert einen Ereignisparameter , in dem sich ein Ereignisobjekt befindet.

Lassen Sie mich Ihnen ein Beispiel zeigen.

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

// We are dispatching the our custom event here.
window.dispatchEvent(event);

// Let's say we have a handleAddNotification function inside our project like below
function handleAddNotification(e) {
  // logic here.
  
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

<button onclick="handleButtonClick()">
  Create my account
</button>
const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

function handleButtonClick(){
 window.dispatchEvent(event);
}

function handleAddNotification(e) {
  alert(e.detail.title + ' ' + e.detail.message);
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

Für welche Zwecke und wo verwenden wir es?

Bevor Sie lesen, sollten Sie diese Artikel über Mikro-Frontends nachschlagen.

In CicekSepeti haben wir hier eine Mikro-Frontend-Architektur und benutzerdefinierte Komponenten wie eine Schaltfläche, einen Tooltip, eine Benachrichtigung, ein Kontrollkästchen usw. und mehrere Fragmente. Manchmal ist eine Kommunikation zwischen diesen Komponenten und Fragmenten erforderlich. Genau an dieser Stelle helfen uns die benutzerdefinierten Ereignisse.

Um über Beispiele zu sprechen, wir haben eine Benachrichtigungskomponente auf Remote und möchten sie nach einigen Transaktionen auf einer der Seiten anzeigen.

In diesem Fall hat die Benachrichtigungskomponente einen Ereignis-Listener namens „NOTIFICATION_ADD“ und die Seite hat ein Registrierungsformular. Wenn der Benutzer auf die Schaltfläche „Registrieren“ klickt, stellen wir eine API-Anforderung und zeigen dann eine Erfolgs- oder Fehler-Toast-Meldung über die Methode dispatchEvent und den benutzerdefinierten Ereigniskonstruktor an.

Dank der Ereignis-Listener der Benachrichtigungskomponente können wir unsere benutzerdefinierten Ereignisse auslösen, die zuvor in anderen Projekten definiert wurden, wo und wann immer wir wollen.

Zusammenfassung

Die Verwendung von benutzerdefinierten JavaScript-Ereignissen kann bei richtiger Verwendung sowohl die Benutzer- als auch die Entwicklungserfahrung Ihrer App verbessern . Von nun an wissen wir, dass wir benutzerdefinierte Ereignisse verwenden können, wenn die Standardereignisse von JavaScript wie Tastaturereignisse, Mausereignisse usw. unsere Anforderungen nicht erfüllen.

Verweise