C#-like Event Patterns for Javascript

Tuesday, 26 August 2008 16:54 by MartinKirk

Just "invented" these patters today, when i should be working Tongue out

in C# you may subscribe to events, adding events like this:

myObject.Click += new EventHandler(myObject_Clicked);

and you may define your own return EventArgs:

//EventArgs Definition
public class StoppedEventArgs : EventArgs
{
    public Vector StoppedPosition { get; set; }
}

//Event is being fired
if(Stopped != null)
{
    Stopped(this, new StoppedEventArgs { StoppedPosition = pos });
}

//Subscription
Sparcle.Stopped += new EventHandler<StoppedEventArgs>(Sparcle_Stopped);

//EventHandler
void Sparcle_Stopped(object sender, StoppedEventArgs e)
{
    Sparcle s = (Sparcle)sender;
    double angle = rnd.NextDouble() * 2 * Math.PI;
    s.spd.X = Math.Cos(angle) * rnd.NextDouble() * 1;
    s.spd.Y = Math.Sin(angle) * rnd.NextDouble() * 1;
}

Now lets transfer these patterns to Javascript:

//Advanced EventArgs
function AdvEventArgs(x,y,z){
    this.X = x;
    this.Y = y;
    this.Z = z;
}

function MyObject(){
    //**** SIMPLE EVENT *****************
    this.onEvent = null;
    
    var fireEvent = function(){
        if(this.onEvent!==null){
            this.onEvent();
        }
    };
    
    //**** ADVANCED EVENT ***************
    this.onAdvEvent = null;
    
    var fireAdvEvent = function(){
        if(this.onAdvEvent!==null){
            this.onAdvEvent(new AdvEventArgs(1,2,3));
        }
    };
}

var obj = new MyObject();


//SIMPLE SUBSCRIPTION
function SimpleHandler(){
    alert("Simple Event");
}
obj.onEvent = SimpleHandler;

//ADVANCED SUBSCRIPTION
function AdvancedHandler(Args){
    alert
    (
        "X:" + Args.X +
        ", Y:" + Args.Y +
        ", Z:" + Args.Z
    );
}
obj.onAdvEvent = AdvancedHandler;

So now we have custom events in simple and advanced form, just like we know them from C# Laughing

Now lets make things more exciting... In C# you may subscribe to the same event with multiple handlers, so lets do that in Javascript too:

function MyObject2(){
    var EventListeners = [];
   
    this.onEvent = function(Handler)
    {
        EventListeners.push( Handler );
    };
   
    var fireEvent = function()
    {
        for(var i=0,listener ; (Listener=EventListeners[i]) ; i++)
        {
            listener();
        }
    };
}

var obj2 = new MyObject2();

function Handler1(){ alert(1); }
function Handler2(){ alert(2); }

obj2.onEvent( Handler1 );
obj2.onEvent( Handler2 );

 

Categories:   Javascript | Patterns
Actions:   E-mail | Permalink | Comments (1) | Comment RSSRSS comment feed

Comments

October 2. 2009 14:26

Boiler servicing review

I have  begun to develop utilising Javascript in the client browser but  am finding it is a real learning curve.  The phrase " Clike Event Patterns for Javascript " in this post, grabbed my attention. My previous experience is with mysql, php, most linux based tools and a little flash. The problems of employing Javascript to arrive at a satisfactory client script which functions quickly in all the established browsers, Internet Explorer, Firefox, Safari and Google Chrome can be a great head ache that is taking me numerous hours to master.  I feel the tutorial websites  are oftentimes inert and address the identical items, discussion in blogs frequently reference actual methods to resolve problems that takes me through the learning curve more rapidly. Absorbing to read your thoughts and the remarks in your website on Javascript. Thanks for the article, it has helped in a moderate way to take me through the migration.

Boiler servicing review

Comments are closed