JavaScript : Comprendre CustomEvent et dispatchEvent

Dans cet article, je vais essayer d'expliquer comment créer et distribuer des événements en utilisant Event, CustomEventles constructeurs et la dispatchEvent()méthode. Nous explorerons également comment et à quelles fins les événements personnalisés et dispatchEvent sont utilisés dans nos projets.

J'espère que vous serez en mesure de créer des événements personnalisés d'ici la fin de cet article.

Alors, commençons!

Une application Web consiste en une série d'événements et nous pouvons dire que ces événements sont l'une des parties les plus essentielles d'une application Web.

Dans certains cas, les événements JavaScript par défaut ne répondent pas à nos exigences. Par exemple, dans nos applications, nous utilisons certains événements personnalisés qui ne sont pas disponibles dans les événements JavaScript par défaut pour ajouter des notifications, actualiser certaines données, etc. Nous les examinerons dans la suite de l'article.

Comment pouvons-nous créer des événements personnalisés ?

Il existe deux façons de créer des événements personnalisés.

• La première consiste à utiliser un constructeur d' événement .
• La deuxième méthode consiste à utiliser le constructeur CustomEvent que nous préférons.

Constructeur d'événements

Vous pouvez créer des événements personnalisés avec le constructeur Event comme suit :

Veuillez noter que les noms d'événements ne sont pas sensibles à la casse. Donc NOTIFICATION_ADD est identique à Notification_Add ou notification_add .

const event = new Event('NOTIFICATION_ADD');

Comme nous l'avons mentionné ci-dessus, si nous voulons ajouter plus de données à l'objet événement, nous pouvons utiliser le constructeur CustomEvent comme suit :

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

Eh bien, l'événement a été créé. Et après? Bien sûr, nous voulons l'utiliser dans notre projet. La dernière étape du déclenchement d'un événement consiste à appeler la méthode dispatchEvent(). Il accepte un paramètre d' événement à l'intérieur duquel se trouve un objet Event.

Permettez-moi de vous montrer un exemple.

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

À quelles fins et où l'utilisons-nous ?

Avant de lire, vous voudrez peut-être consulter ces articles sur le micro-frontend.

Dans CicekSepeti, nous avons ici une architecture micro frontale et avons des composants personnalisés comme un bouton, une info-bulle, une notification, une case à cocher, etc., et plusieurs fragments. Parfois, une communication est nécessaire entre ces composants et fragments. Juste à ce stade, les événements personnalisés nous aident.

Si pour parler d'exemples, nous avons un composant de notification sur la télécommande et voulons l'afficher sur l'une des pages après certaines transactions.

Dans ce cas, le composant de notification a un écouteur d'événement nommé 'NOTIFICATION_ADD' et la page a un formulaire d'inscription. Lorsque l'utilisateur appuie sur le bouton d'enregistrement, nous effectuons une demande d'API, puis affichons un message toast de réussite ou d'erreur via la méthode dispatchEvent et le constructeur d'événements personnalisés.

Grâce aux écouteurs d'événements sur le composant de notification, nous pouvons déclencher nos événements personnalisés qui ont été définis précédemment dans d'autres projets où et quand nous le voulons.

Sommaire

L'utilisation d'événements personnalisés JavaScript peut améliorer à la fois l'expérience utilisateur et de développement de votre application lorsqu'elle est utilisée correctement . À partir de maintenant, nous savons que nous pouvons utiliser des événements personnalisés lorsque les événements par défaut de JavaScript tels que les événements de clavier, les événements de souris, etc. ne répondent pas à nos exigences.

Références