[whatwg] Exposing EventTarget to JavaScript

Erik Arvidsson erik.arvidsson at gmail.com
Fri Apr 24 10:00:43 PDT 2009


Almost all JavaScript libraries and web apps of moderate size end up
reimplementing events for their UI toolkits or for messaging between
different parts of their application. To help out with this scenario
it would be good if an implementation of the EventTarget interface
could be exposed to JavaScript. This would mean that JavaScript can
instantiate and extend event targets and dispatch events to these
objects would work just like it does for DOM elements today.

For example:

var et = new EventTarget;
...
et.addEventListener('foo', fun, false);
...
et.dispatchEvent(eventObject);

would call the handler fun.

The example above actually works today if you replace "new
EventTarget" with "document.createElement('div')".

The next and more important step is to allow a JavaScript "class" to
extend an EventTarget. For example:

function MyClass() {
  EventTarget.call(this);
  ...
}
MyClass.prototype = new EventTarget; // *[1]

Then addEventListener and dispatchEvent should work as expected on
MyClass objects.

One more thing needs to be mentioned and that is how event propagation
should work in scenario. If the object has a "parentNode" property
then the event dispatching mechanism will do the right thing.

var o1 = new MyClass;
var o2 = new MyClass;
o1.parentNode = o2;
o2.addEvengListener('foo', fun, true); // capture
o1.dispatchEvent(e);

In this case fun will be called because the event propagated up to o2.

There is one more thing that needs to be done to make this work
without a hitch and that is to allow "new Event('foo')" to work.
Without that we would still have to do "var $tmp =
document.createEvent('Event'); $tmp.initEvent('foo')" which of course
is very verbose and requires a document.

I see this as a small step to make JS and DOM work better together and
I hope that "this is the beginning of a beautiful friendship".

*[1] This can be optimized using js tricks in ES3 and using
Object.create in ES5 so that no EventTarget needs to be instantiated.

-- 
erik



More information about the whatwg mailing list