JavaScript: Entendendo CustomEvent e dispatchEvent

Neste artigo, tentarei explicar como poderíamos criar e despachar eventos usando Event, CustomEventconstrutores e dispatchEvent()método. Também exploraremos como e para quais propósitos eventos customizados e dispatchEvent são usados ​​em nossos projetos.

Espero que você consiga criar eventos personalizados até o final deste artigo.

Então vamos começar!

Um aplicativo da web consiste em uma série de eventos e podemos dizer que esses eventos são uma das partes mais essenciais de um aplicativo da web.

Em alguns casos, os eventos JavaScript padrão não atendem aos nossos requisitos. Por exemplo, em nossos aplicativos, estamos usando alguns eventos personalizados que não estão disponíveis em eventos JavaScript padrão para adicionar notificações, atualizar alguns dados, etc. Vamos dar uma olhada neles no restante do artigo.

Como podemos criar eventos personalizados?

Há duas maneiras de criar eventos personalizados.

• A primeira maneira é usar um construtor Event .
• A segunda maneira é usar o construtor CustomEvent que preferimos.

Construtor de evento

Você pode criar eventos personalizados com o construtor Event da seguinte maneira:

Observe que os nomes dos eventos não diferenciam maiúsculas de minúsculas. Então NOTIFICATION_ADD é o mesmo que Notification_Add ou notification_add .

const event = new Event('NOTIFICATION_ADD');

Como mencionamos acima, se quisermos adicionar mais dados ao objeto de evento, podemos usar o construtor CustomEvent da seguinte maneira:

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

Bem, o evento foi criado. Qual é o próximo? Claro, queremos usá-lo em nosso projeto. A última etapa para disparar um evento é chamar o método dispatchEvent(). Ele aceita um parâmetro de evento dentro do qual está um objeto Event.

Deixe-me mostrar-lhe um exemplo.

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

Para que fins e onde o usamos?

Antes de ler, você pode procurar esses artigos sobre micro frontend.

No CicekSepeti, temos uma micro arquitetura de frontend aqui e temos componentes personalizados como um botão, uma dica de ferramenta, uma notificação, uma caixa de seleção etc. e vários fragmentos. Às vezes, a comunicação é necessária entre esses componentes e fragmentos. Nesse ponto, os eventos personalizados nos ajudam.

Para falar de exemplos, temos um componente de notificação no controle remoto e queremos exibi-lo em uma das páginas após algumas transações.

Nesse caso, o componente de notificação possui um event listener chamado 'NOTIFICATION_ADD' e a página possui um formulário de registro. Quando o usuário pressiona o botão de registro, fazemos uma solicitação de API e, em seguida, exibimos uma mensagem de brinde de sucesso ou erro por meio do método dispatchEvent e do construtor de evento personalizado.

Graças aos ouvintes de evento no componente de notificação, podemos acionar nossos eventos personalizados que foram definidos anteriormente em outros projetos onde e quando quisermos.

Resumo

O uso de eventos personalizados JavaScript pode melhorar a experiência do usuário e do desenvolvimento de seu aplicativo quando usado corretamente . De agora em diante, sabemos que podemos usar eventos personalizados quando os eventos padrão do JavaScript, como eventos de teclado, eventos de mouse, etc., não atendem aos nossos requisitos.

Referências