[whatwg] Exposing EventTarget to JavaScript

[Alex Russell]

On Fri, Apr 24, 2009 at 10:00 AM, Erik Arvidsson
<erik.arvidsson at gmail.com> wrote:
> 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.

As we discussed off-list, I absolutely support this, but with shorter
names. The DOM names for these interfaces are dumb. Idiomatic JS
prefers short over long, so the above example should be able to be
written as:

var et = new EventTarget();
et.listen("foo", fun); // default phase to "false"
et.dispatch(evtObj);

Similarly, the DOM interface should be modified to allow these aliases
for the existing names.

Regards

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