Don’t have the time to comment the code and explain right now, but I will update the post later on ![]()
I wrote this in about 2minutes to help out a guy just before going to bed so I’ve only tested the addEventListener and dispatch functionality (not removeEventListener), but it actually worked in IE7, IE8, Firefox 3.5, Chrome2 and Stainless (Webkit based browser under osx) on the first try.
Feel free to comment if you find this useful
/** * @author Erik Karlsson, www.nonobtrusive.com */ function Dispatcher(){ this.events=[]; } Dispatcher.prototype.addEventlistener=function(event,callback){ this.events[event] = this.events[event] || []; if ( this.events[event] ) { this.events[event].push(callback); } } Dispatcher.prototype.removeEventlistener=function(event,callback){ if ( this.events[event] ) { var listeners = this.events[event]; for ( var i = listeners.length-1; i>=0; --i ){ if ( listeners[i] === callback ) { listeners.splice( i, 1 ); return true; } } } return false; } Dispatcher.prototype.dispatch=function(event){ if ( this.events[event] ) { var listeners = this.events[event], len = listeners.length; while ( len-- ) { listeners[len](this); //callback with self } } } /** Below is some test-code to verify the most basic functionality **/ function SomeClass(){ Dispatcher.call(this); } SomeClass.prototype = new Dispatcher(); SomeClass.prototype.sendSomeEvent=function(){ this.dispatch("test"); } var foo = new SomeClass(); foo.addEventlistener( "test", function(){ alert("bah"); } ) foo.sendSomeEvent();
#1 by al on September 12th, 2009
nice it works
#2 by Aubrey Taylor on May 17th, 2011
Hey thanks for this; really helped out.
I like to push data with my events so I modified your dispatch slightly:
http://pastie.org/1913292
Data object might look something like: {target: this, param:true}
#3 by Erik Karlsson on May 17th, 2011
@Aubrey, cool, I’m happy it was helpful to you.
#4 by Anil on November 10th, 2011
This awesome coding work fine when we follow structure coding in our app. But fail when we work with classes.
#5 by Tobias on December 6th, 2011
In addition to Aubrey’s data extension:
I use this code in my object oriented environment and needed a reference to the object that received an event. In your current code the context to the object that receives the event is lost (the context is set to the eventDispatcher).
My little add-on excepts a third parameter in the addEventListener method (caller). Add a reference to the object that is getting the eventListener here (e.g.: this) and in your callback you can retrieve the listening object (e.g.: callback(data, CALLER). The CALLER will be the object that was listening.
http://pastie.org/2975411
PS: Great piece of code! This makes javascript behave a lot like AS3
#6 by Tobias on December 6th, 2011
Another thing:
in the addEventListener function :
addEventListener = function(event, callback, caller){
this.events[event] = this.events[event] || [];
if ( this.events[event] ) {
this.events[event].push({
You should change “push” to “unshift” so the object that added the eventListener first will get called the first when the event is dispatched.