Pesquisa de site

Qual é a diferença entre as diferentes formas de manipulação de eventos personalizados em JavaScript?

Eu encontrei os posts abaixo sobre manipulação de eventos personalizados em JavaScript. A partir desses artigos, existem pelo menos duas maneiras de manipular/disparar eventos personalizados:

  1. Usando métodos DOM (createEvent, dispatchEvent)
  • Como eu crio uma classe de evento personalizada em Javascript?
  • http://the.unwashedmeme.com/blog/2004/10/04/custom-javascript-events/
  1. Código personalizado
  • http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/
  • http://www.geekdaily.net/2008/04/02/javascript-defining-and-using-custom-events/

Mas qual é a maneira recomendada de lidar com (disparar e assinar) eventos personalizados?

[Editar] O contexto para esta pergunta não é utilizar nenhuma biblioteca como jQuery, YUI,... mas apenas JavaScript puro

[Editar 2] Parece haver pequenas diferenças, pelo menos no tratamento de erros. Dean Edwards ( http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/ ) está recomendando a primeira forma para o tratamento de eventos personalizados. Podemos dizer que isso é uma diferença?

Resposta #1

O que você está descrevendo é a diferença entre

  • Um sistema de passagem de mensagens baseado em eventos personalizados
  • disparando eventos DOM manualmente.

O primeiro é uma forma de usar eventos para passagem de mensagens. Um exemplo seria criar um EventEmitter

O último é simplesmente uma maneira de usar manualmente o sistema de eventos DOM incorporado nos navegadores. Isso é basicamente usar a API de Eventos DOM 3, que existe nativamente em navegadores (competentes/modernos).

Então a pergunta é simplesmente o que você quer fazer? Disparar eventos DOM ou usar eventos para passagem de mensagens?

Benchmark mostrando que eventos personalizados DOM 3 são 98% mais lentos

O DOM parece ter uma sobrecarga enorme. Ele o faz porque suporta propagação e bolhas de eventos. Ele o faz porque suporta vincular eventos a um DOMElement.

Se você não precisar de nenhum dos recursos dos eventos DOM3, então use uma biblioteca pub/sub de sua escolha.

[Editar 2]

Isso é tudo sobre tratamento de erros, como você faz o tratamento de erros depende de você. Se você sabe que seu emissor de eventos é síncrono, então esse é o comportamento esperado. Ou faça seu próprio tratamento de erros ou use setTimeout para torná-lo assíncrono.

Esteja atento de que, se você tornou assíncrono, você "perde" a garantia de que os manipuladores de eventos tenham executado sua lógica após a chamada de emit/trigger/dispatch retornar. Isso requer um design de alto nível completamente diferente do pressuposto de que os emissores de eventos são síncronos. Esta não é uma escolha a ser feita levianamente

Resposta #2

Existem prós e contras em cada um. Use o que lhe convém.

A desvantagem mais óbvia de usar os métodos do DOM é que eles estão vinculados a implementações baseadas em navegador e envolvem o DOM em coisas mesmo quando realmente não faz sentido (por exemplo, a mensageria não está relacionada a objetos DOM), enquanto uma implementação padrão no estilo Observer pode ser usada em qualquer ambiente, não apenas em navegadores da web, e com qualquer objeto genérico que você quiser.

O inconveniente mais óbvio de fazer sua própria implementação de Observer é que você fez sua própria implementação de Observer, em vez de reutilizar algo já presente (testado, depurado, otimizado, etc.) no ambiente.