JavaScript: Zrozumienie zdarzenia CustomEvent i shippingEvent

W tym artykule postaram się wyjaśnić, w jaki sposób możemy tworzyć i wysyłać zdarzenia za pomocą Eventkonstruktorów CustomEventi dispatchEvent()metody. Przyjrzymy się również, w jaki sposób i do jakich celów w naszych projektach wykorzystywane są niestandardowe zdarzenia i shippingEvent.

Mam nadzieję, że do końca tego artykułu będziesz w stanie tworzyć niestandardowe wydarzenia.

Więc zacznijmy!

Aplikacja internetowa składa się z serii zdarzeń i można powiedzieć, że te zdarzenia są jedną z najważniejszych części aplikacji internetowej.

W niektórych przypadkach domyślne zdarzenia JavaScript nie spełniają naszych wymagań. Na przykład w naszych aplikacjach używamy niektórych niestandardowych zdarzeń, które nie są dostępne w domyślnych zdarzeniach JavaScript, aby dodawać powiadomienia, odświeżać niektóre dane itp. Przyjrzymy się im w dalszej części artykułu.

Jak możemy tworzyć niestandardowe wydarzenia?

Istnieją dwa sposoby tworzenia niestandardowych wydarzeń.

• Pierwszym sposobem jest użycie konstruktora Event .
• Drugim sposobem jest użycie preferowanego przez nas konstruktora CustomEvent .

Konstruktor zdarzeń

Możesz tworzyć niestandardowe zdarzenia za pomocą konstruktora Event w następujący sposób:

Należy pamiętać, że w nazwach zdarzeń nie jest rozróżniana wielkość liter. Więc NOTIFICATION_ADD jest taki sam jak Notification_Add lub notification_add .

const event = new Event('NOTIFICATION_ADD');

Jak wspomnieliśmy powyżej, jeśli chcemy dodać więcej danych do obiektu zdarzenia, możemy użyć konstruktora CustomEvent w następujący sposób:

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

Cóż, wydarzenie zostało utworzone. Co dalej? Oczywiście chcemy go wykorzystać w naszym projekcie. Ostatnim krokiem uruchomienia zdarzenia jest wywołanie metody shippingEvent() . Akceptuje parametr zdarzenia , wewnątrz którego znajduje się obiekt Event.

Pozwól, że pokażę ci przykład.

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);

Do jakich celów i gdzie go używamy?

Zanim zaczniesz czytać, być może zechcesz przejrzeć te artykuły na temat mikro frontendu.

W CicekSepeti mamy tutaj architekturę mikro frontendu i niestandardowe komponenty, takie jak przycisk, podpowiedź, powiadomienie, pole wyboru itp. Oraz kilka fragmentów. Czasami potrzebna jest komunikacja między tymi komponentami i fragmentami. Właśnie w tym momencie pomagają nam zdarzenia niestandardowe.

Jeśli mówimy o przykładach, mamy komponent powiadomień na zdalnym i chcemy go wyświetlić na jednej ze stron po niektórych transakcjach.

W tym przypadku komponent powiadomień ma detektor zdarzeń o nazwie „NOTIFICATION_ADD”, a strona zawiera formularz rejestracyjny. Gdy użytkownik naciśnie przycisk rejestracji, wysyłamy żądanie do API, a następnie wyświetlamy wyskakujący komunikat o powodzeniu lub błędzie za pomocą metody shippingEvent i niestandardowego konstruktora zdarzeń.

Dzięki detektorom zdarzeń w komponencie powiadomień możemy wyzwalać nasze niestandardowe zdarzenia, które zostały wcześniej zdefiniowane w innych projektach, gdzie i kiedy chcemy.

Streszczenie

Używanie niestandardowych zdarzeń JavaScript może poprawić zarówno wygodę użytkownika, jak i programistów Twojej aplikacji , jeśli są używane prawidłowo . Od teraz wiemy, że możemy używać niestandardowych zdarzeń, gdy domyślne zdarzenia JavaScript, takie jak zdarzenia klawiatury, zdarzenia myszy itp., Nie spełniają naszych wymagań.

Bibliografia