Simple JavaScript event model
At work we are using a lot of JavaScript for all of our user controls and other ASP.NET components. I’m guessing that so are you. Our solution is to add a .js file per each user control and then load them on the page dynamically as explained here. That is a great way to componentize your web application.
Bad behavior
The problem is when an action on one user control’s JavaScript effects elements on other user controls. An example could be the page header where it says Signed in as Joe. When you are on the update profile page and change your name from Joe to Johnny using AJAX, then you don’t update the header element. If you do, you probably reference the DOM element from your profile update script directly. This is bad since the header and profile are located in two different user controls and thus haven’t got a clue about the existence of each other. Why should the JavaScript treat them differently?
Good behavior
What you really want to do is to use an event model. Then it works like so:
The user changes his name to Johnny and the AJAX function in JavaScript triggers an event called profileNameUpdated and passes the new name along as a parameter. The page header have already told the event model to subscribe to the profileNameUpdated event and so it now catches the event triggered by the profile. It reads the new name and updates its own DOM element.
The code
Amazingly, the JavaScript code for this is less than 1KB and works on all websites, platforms and browsers. This is what it looks like.
// The constructor of the eventFramework
function eventFramework()
{
this.handlers = [];
}
// Triggers the event specified by the name and passes the eventArgs to listeners
eventFramework.prototype.trigger = function(name, eventArgs)
{
for(var i = 0; i < this.handlers.length; i++)
{
if(this.handlers[i].eventName == name)
this.handlers[i].eventHandler.call(this, eventArgs);
}
}
// Adds a listener/subscriber to the event specified by the 'name' parameter
eventFramework.prototype.addListener = function(name, handler)
{
if(typeof(name) != 'string' || typeof(handler) != 'function')
{
throw new SyntaxError("Invalid parameters when creating listener with the following arguments: 'Name': " + name + ", 'Handler': " + handler);
}
this.handlers.push({ "eventName" : name, "eventHandler" : handler });
}
// Initializes the eventFramework and makes it available globally
var events = new eventFramework();
Implementation
Download the .js file below and add it to your site. It should be the first JavaScript to be included in the <head> element of your pages.
When the script is included, it is now possible to start triggering and listening to events. To trigger an event, simple write this:
events.trigger('profileNameUpdated', 'Johnny');
You can also pass objects or JSON as a parameter like so:
events.trigger('profileNameUpdated', {'name':'Johnny', 'oldName':'Joe'});
To subscribe or listen to these events, you simply add the following to any user control or JavaScript file:
events.addListener('profileNameUpdated', eventListener);
function eventListener(eventArgs)
{
alert(eventArgs);
}
The eventArgs parameter will contain whatever was passed along by the trigger.