I came across the below posts about custom event handling in JavaScript. From these articles, there are two ways (at least) of handling/firing custom events:
- Using DOM methods (createEvent, dispatchEvent)
- Custom code
But what is the recommended way of handling (firing & subscribing) custom events?
[Edit] The context for this question is not using any libraries like jQuery, YUI,... but just plain JavaScript
[Edit 2] There seems to be a subtle differences, at least with the error handling.
Dean Edwards ( http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/ ) is recommending the former way for custom event handling. Can we say this a difference?
Raynos :
What your describing is the difference between \n\n\nA custom event based message passing system\nmanually firing DOM events.\n\n\nThe former is a way to use events for message passing. An example would be creating an EventEmitter\n\nThe latter is simply a way to use the browsers build in DOM event system manually. This is basically using the DOM 3 Event API which natively exists in (competent / modern) browsers.\n\nSo the question is simply what do you want to do? Fire DOM events or use events for message passing?\n\nBenchmark showing DOM 3 custom events is 98% slower\n\nThe DOM appears to have a huge overhead. It does so because it supports event propagation and bubbling. It does because it supports binding events to a DOMElement. \n\nIf you do not need any of the features of DOM3 events then use a pub/sub library of choice.\n\n[Edit 2]\n\nThat's all about error handling, how you do error handling is upto you. If you know your event emitter is synchronous then that's intended behaviour. Either do your own error handling or use setTimeout to make it asynchronous.\n\nBe wary that if you've made it asynchronous you \"lose\" the guarantee that the event handlers have done their logic after the emit/trigger/dispatch call returns. This requires a completely different high level design then the assumption that event emitters are synchronous. This is not a choice to make lightly",
2011-07-04T11:02:23
T.J. Crowder :
There are pros and cons to each. Use what suits you.\n\nThe most obvious \"con\" to using the DOM methods is that they're tied to browser-based deployments and involve the DOM in things even if it doesn't really make sense (e.g., the messaging isn't related to DOM objects), whereas a standard Observer-style implementation can be used in any environment, not just web browsers, and with any generic object you like.\n\nThe most obvious \"con\" to doing your own Observer implementation is that you've done your own Observer implementation, rather than reusing something already present (tested, debugged, optimised, etc.) in the environment.",
2011-07-04T11:04:05