I’ve written a window event handler mainly for handling multiple onload events. The typical way of handling multiple onload events is by creating a helper function that contains all the onload functions and using window.onload to call the helper function.
An example would look something like this,
function onloader()
{
onload1();
onload2();
// and so on...
}
window.onload = onloader;
However, I wanted to write something more object oriented and more elegant. So I wrote my own method which will allow you to add multiple events to the window object. This script is very early in its stage and only allows you to add events. I will probably work on it more if I figure out more uses for it.
So here’s the script.
/**
* @author: Danny Ng (http://www.dannytalk.com)
* @date: 30/08/08
* @notes: Free to use and distribute without altering this notice. Would appreciate a link back.
*/
/**
* Window Events:
* - onblur
* - onerror
* - onfocus
* - onload
* - onresize
* - onunload
*
* @usage: window.addEvent(event_type, function)
* @params: string, function
*/
function addEvent (e, func)
{
var old_event;
switch(e)
{
case 'onblur':
old_event = this.onblur;
if (typeof this.onblur == 'undefined')
{
this.onblur = function(e) {
func();
};
}
else if (typeof this.onblur == 'function')
{
this.onblur = function(e) {
old_event();
func();
};
}
break;
case 'onerror':
old_event = this.onerror;
if (typeof this.onerror == 'undefined')
{
this.onerror = function(e) {
func();
};
}
else if (typeof this.onerror == 'function')
{
this.onerror = function(e) {
old_event();
func();
};
}
break;
case 'onfocus':
old_event = this.onfocus;
if (typeof this.onfocus == 'undefined')
{
this.onfocus = function(e) {
func();
};
}
else if (typeof this.onfocus == 'function')
{
this.onfocus = function(e) {
old_event();
func();
};
}
break;
case 'onload':
old_event = this.onload;
if (typeof this.onload == 'undefined')
{
this.onload = function(e) {
func();
};
}
else if (typeof this.onload == 'function')
{
this.onload = function(e) {
old_event();
func();
};
}
break;
case 'onresize':
old_event = this.onresize;
if (typeof this.onresize == 'undefined')
{
this.onresize = function(e) {
func();
};
}
else if (typeof this.onresize == 'function')
{
this.onresize = function(e) {
old_event();
func();
};
}
break;
case 'onunload':
old_event = this.onunload;
if (typeof this.onunload == 'undefined')
{
this.onunload = function(e) {
func();
};
}
else if (typeof this.onunload == 'function')
{
this.onunload = function(e) {
old_event();
func();
};
}
break;
default:
}
}
I use this feature in my previous post in tracking exit links in Google Analytics where I need to handle multiple onload events as my other Wordpress plugins uses the onload event as well.
An example of using this would be, window.addEvent(‘onload’, dtalk_ga.applyVirtualExits). Hope this helps.
[update date=01/09/08]
Thanks to ahot’s tip, I’ve shortened the code significantly now. Theoretically, this function should be able to work on all objects that support events.
/**
* @author: Danny Ng (http://www.dannytalk.com)
* @date: 01/09/08
* @notes: Free to use and distribute without altering this notice. Would appreciate a link back.
*/
/**
* @pre-condition: object must support events
* @usage: object.addEvent(event_type, function)
* @params: string, function
*/
function addEvent(e, func)
{
var old_event = this[e];
if (old_event)
{
this[e] = function(e) {
old_event();
func();
};
}
else
this[e] = func();
}
[/update]
