What is the difference between different ways to handle custom events in JavaScript?

Question

I came across the following posts about custom event handling in JavaScript. Of these articles, there are two ways (at least) to control / trigger custom events:

• Using DOM methods (createEvent, dispatchEvent)
  • How to create a custom event class in javascript?
  • http://the.unwashedmeme.com/blog/2004/10/04/custom-javascript-events/
    
    
• Custom code
  • 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/

But what is the recommended way to handle (trigger and subscribe) user events?

[Change] The context for this question does not use libraries such as jQuery, YUI, ... but just JavaScript

[Edit 2] It seems that there are slight differences, at least with error handling. Dean Edwards ( http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/ ) recommends using the old way of handling custom events. How do we say this difference?

Answer 1

How do you describe the difference between

• Special Event Based Messaging System
• manually trigger DOM events.

The first way to use events to send messages. An example would be to create an EventEmitter

The latter is just a way to manually use browsers in the DOM event system. This is mainly used by the DOM 3 Event API , which originally exists in (competent / modern) browsers.

So the question is, what do you want to do? Fire DOM or use events to send messages?

Test showing DOM 3 custom events 98% slower

The DOM seems to have huge overhead. He does this because he supports the dissemination of events and the bubbling. This is because it supports event bindings to DOMElement.

If you do not need any functions of DOM3 events, use the pub / sub library.

[Change 2]

As for error handling, how you handle error handling is up to you. If you know that your emitter event is synchronous, then this is the intended behavior. Either do your own error handling, or use setTimeout to make it asynchronous.

Be careful: if you make it asynchronous, you will lose the guarantee that the event handlers executed their logic after returning the emit / trigger / dispatch call. This requires a completely different high-level design, and then the assumption that the event emitters are synchronous. It is not a choice to make lightly

Answer 2

There are pros and cons to each. Use what suits you.

The most obvious “convention” using DOM methods is that they are tied to browser-based deployments and include the DOM in things, even if it does not make sense (for example, messaging is not related to the DOM), while the standard Observer implementation can be used in any environment, not just web browsers, and with any universal object that you like.

The most obvious “end” for executing your own Observer is that you performed your own implementation of Observer, and not re-present something (checked, debugged, optimized, etc.) in the environment.

Answer 3

Many libraries already provide a way to handle events, and I would recommend using only the existing library. If you use the DOM, you assume that the browser provides the necessary support, whereas if you use a special mechanism, you can sacrifice speed for a custom implementation. If you rely on an existing library, the library may choose the appropriate tradeoffs.

For example, Closure provides an EventTarget , which has an interface that is different from the DOM interface, but which is browser independent to support its support.