W3C home > Mailing lists > Public > www-dom@w3.org > January to March 2012

Re: [DOM4] EventTarget as first class citizen

From: Marcos Caceres <w3c@marcosc.com>
Date: Wed, 29 Feb 2012 19:35:45 +0000
To: Boris Zbarsky <bzbarsky@mit.edu>
Cc: www-dom@w3.org
Message-ID: <64509A13AAE1426585D92CDBC79DBAC0@marcosc.com>



On Wednesday, February 29, 2012 at 7:11 PM, Boris Zbarsky wrote:

> On 2/29/12 1:37 PM, Marcos Caceres wrote:
> > In the sense that say:
> > 1. given "var a = { }"
> > 2. … some magic… e.g., EventListener.create( a );
> > 3. would have .addEventListener(), .removeEventListener(), .dispatchEvent() as properties attached.
>  
>  
>  
> How is this different from just doing |new EventListener()| exactly?

Well, I might have a fully developed object I want to add this functionality to. For example:

function MySuperDuperThingo(){
 this.doesSomethingAwesome = function(){..};


 this.thatIsAwesome = function(){…};


 this.x = "foo";

 EventTarget.create(this); //or whatever syntax

}

var thing = new MySuperDuperThingo();  

thing.addEventListener("some", cb)


That instead of having to wrap the instance of new EventTarget():  

function MySuperDuperThingo(){
  var et = EventTarget.create();
    
  this.addEventListener = function (e,t){
      et.addEventListener(e,t)
  }

}

> > (I won't pretend to use the right ECMAScript terminology here… be it the prototype chain or whatever)
>  
> Well, that's the part that matters, now isn't it?
Perhaps. I just wanted to bring the use case for consideration (and some evidence that people want this as a core part of the platform).  
> > So, you get an Object that has a __proto__ with properties:
> >  
> > constructor: function Object() { [native code] }
> > hasOwnProperty: function hasOwnProperty() { [native code] }
> > isPrototypeOf: function isPrototypeOf() { [native code] }
> > propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
> > toLocaleString: function toLocaleString() { [native code] }
> > toString: function toString() { [native code] }
> > valueOf: function valueOf() { [native code] }
> > addEventListener: function addEventListener() { [native code] }
> >  
> > removeEventListener: function removeEventListener() { [native code] }
> >  
> >  
> > dispatchEvent: function dispatchEvent() { [native code] }
>  
> OK, so that looks like EventListener.prototype. Where does |a| come in?
"a" now has "addEventListener" in its prototype chain. So:   

a.addEventListener("foo", function(){…do something useful...})

var e = new CustomEvent('foo')
a.dispatchEvent(e)
Received on Wednesday, 29 February 2012 19:36:19 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 22 June 2012 06:14:09 GMT