JavaScript: informazioni su CustomEvent e dispatchEvent

In questo articolo, cercherò di spiegare come creare e inviare eventi utilizzando Event, CustomEventcostruttori e dispatchEvent()metodo. Esploreremo anche come e per quali scopi gli eventi personalizzati e dispatchEvent vengono utilizzati nei nostri progetti.

Spero che sarai in grado di creare eventi personalizzati entro la fine di questo articolo.

Quindi iniziamo!

Un'applicazione web consiste in una serie di eventi e possiamo dire che questi eventi sono una delle parti più essenziali di un'applicazione web.

In alcuni casi, gli eventi JavaScript predefiniti non soddisfano i nostri requisiti. Ad esempio, nelle nostre applicazioni utilizziamo alcuni eventi personalizzati che non sono disponibili negli eventi JavaScript predefiniti per aggiungere notifiche, aggiornare alcuni dati, ecc. Daremo un'occhiata a questi nel resto dell'articolo.

Come possiamo creare eventi personalizzati?

Esistono due modi per creare eventi personalizzati.

• Il primo modo è utilizzare un costruttore di eventi .
• Il secondo modo è utilizzare il costruttore CustomEvent che preferiamo.

Costruttore di eventi

Puoi creare eventi personalizzati con il costruttore di eventi come segue:

Tieni presente che i nomi degli eventi non fanno distinzione tra maiuscole e minuscole. Quindi NOTIFICATION_ADD è uguale a Notification_Add o notification_add .

const event = new Event('NOTIFICATION_ADD');

Come accennato in precedenza, se vogliamo aggiungere più dati all'oggetto evento possiamo utilizzare il costruttore CustomEvent come segue:

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

Bene, l'evento è stato creato. Qual è il prossimo? Naturalmente, vogliamo usarlo nel nostro progetto. L'ultimo passo per attivare un evento è chiamare il metodo dispatchEvent(). Accetta un parametro evento all'interno del quale è presente un oggetto Evento.

Lascia che ti mostri un esempio.

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

Per quali scopi e dove lo usiamo?

Prima di leggere potresti voler consultare questi articoli sul micro frontend.

In CicekSepeti, abbiamo un'architettura micro frontend qui e abbiamo componenti personalizzati come un pulsante, un tooltip, una notifica, una casella di controllo, ecc. e diversi frammenti. A volte è necessaria la comunicazione tra questi componenti e frammenti. Proprio a questo punto ci vengono in aiuto gli eventi personalizzati.

Se per parlare di esempi, abbiamo un componente di notifica in remoto e vogliamo visualizzarlo su una delle pagine dopo alcune transazioni.

In questo caso, il componente di notifica ha un listener di eventi denominato "NOTIFICATION_ADD" e la pagina ha un modulo di registrazione. Quando l'utente preme il pulsante di registrazione, effettuiamo una richiesta API e quindi visualizziamo un messaggio di brindisi di successo o di errore tramite il metodo dispatchEvent e il costruttore di eventi personalizzato.

Grazie ai listener di eventi sul componente di notifica, possiamo attivare i nostri eventi personalizzati che sono stati definiti in precedenza in altri progetti dove e quando vogliamo.

Riepilogo

L'utilizzo di eventi personalizzati JavaScript può migliorare l'esperienza utente e di sviluppo della tua app se utilizzata correttamente . D'ora in poi, sappiamo che possiamo utilizzare eventi personalizzati quando gli eventi predefiniti di JavaScript come eventi della tastiera, eventi del mouse, ecc. non soddisfano i nostri requisiti.

Riferimenti