Posts Tagged dispatcher

Custom events in javascript by making your own Dispatcher class.

Posted by Erik Karlsson in JavaScript, Web development on July 24th, 2009

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();

, ,

6 Comments