W3C EventTarget Interface / Mixin
JavaScript
Permalink
Failed to load latest commit information.
build removed the double copy right Feb 7, 2013
src removed the double copy right Feb 7, 2013
template first version of the repo Feb 7, 2013
test
.gitignore removed modules Feb 7, 2013
.npmignore
LICENSE.txt
Makefile first version of the repo Feb 7, 2013
README.md added versions Feb 7, 2013
index.html
package.json first version of the repo Feb 7, 2013

README.md

event-target

A W3C EventTarget Interface usable directly as JavaScript mixin.

What

EventTarget is an object compatible with both ES3 and ES5 JS engines, suitable for old IE as latest version of node.js too.

The interface has 3 methods, so does EventTarget

  • addEventListener(type:string, listener:function|object[, capture:boolean]):void to add/subscribe a generic event listener, if not present already
  • removeEventListener(type:string, listener:function|object[, capture:boolean]):void to remove/unsubscribe a generic event listener, if already present
  • dispatchEvent(event:object):void to dispatch/notify all listeners

How

The very first thing to understand is that EventTarget is an interface, a concept in JavaScript represented by objects, rather than constructors. In fact, EventTarget is not a function, so any attempt to new EventTarget will fail.

// retrieve the interface
var EventTarget = require('event-target');

// use it as mixin!
function MyNode() {}
MyNode.prototype.addEventListener = EventTarget.addEventListener;
MyNode.prototype.removeEventListener = EventTarget.removeEventListener;
MyNode.prototype.dispatchEvent = EventTarget.dispatchEvent;

var el = new MyNode;
el.addEventListener("test", function(evt){
  console.log("it works!");
});
el.dispatchEvent({type:"test"});

That's pretty much it :-)

Any object or prototype you want could use EventTarget methods, there's no need to initialize a thing, cool? What else could we do ? Well, we could, as example, simply borrow those methods when needed.

var Emitter = (function(){

  var EventTarget = require('event-target'),
      addEventListener = EventTarget.addEventListener,
      removeEventListener = EventTarget.removeEventListener,
      dispatchEvent = EventTarget.dispatchEvent;

  function Emitter(){}
  
  Emitter.prototype = {
    on: function on(eventName, callMe) {
      addEventListener.call(this, eventName, callMe);
      return this;
    },
    off: function off(eventName, dontCallMe) {
      removeEventListener.call(this, eventName, dontCallMe);
      return this;
    },
    emit: function emit(eventName) {
      dispatchEvent.call(this, eventName);
      return this;
    }
  };

  return Emitter;

}());

var e = new Emitter;
e.on("custom:event", doStuff)
 .on("click", doExtraStuff)
 .off("whatever", dontBother)
 .emit("custom:event");

Which EventTarget ?

Here the list of files you might want to check :-)

Difference Between ES3 And ES5

Well, it's mainly about enumerability. By default all listeners are not enumerable in ES5 and all of them configurable. This is a god way to go so no extra object is needed, the instance is the EventTarget itself indeed. In ES3, if a for/in loop is really needed/necessary over the EventTarget object, and bear in mind you've never probably done a for/in with a DOM node, as example, or an Event emitter, be sure that properties starting with the chosen prefix, right now "@@", should not be modified.

Same thing is valid for ES5 and Object.getOwnPropertyNames(EventTarget), I believe it's a good practice to usually avoid dealing with anything that starts with _ or @ ... deal? Cool, now go and do amazing stuff :-)

If You Want To Build Or Test This Project

In this case there are few things to do, from the project folder:

  • make dependencies
  • make clean
  • make

These steps are necessary to be able to build or to test, where to test, still in the same folder, just write polpetta then press ctrl over the link in console or just go in localhost and you should see in your browser a green page.

To test with node simply make test and you are ready to go.