Custom JavaScript events

So, you want to trigger an event when something happens in you JavaScript code? There might be better ways to do it, but here is the solution that I use for my code which is pretty light and easy to understand.

It starts by implementing the JSEvent object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var JSEvent = function() 
{
	this.eventAction = new Array();
 
	this.subscribe = function(fn) 
	{
		this.eventAction.push(fn);
	};
 
	this.unsubscribe = function(fn) 
	{
	    var fnPos = $.inArray(fn, this.eventAction);
	    if (fnPos != -1)
	        this.eventAction[fnPos] = false;
	};
 
 
	this.fire = function()
	{
		for (f=0;f<this.eventAction.length;f++)
	        if (this.eventAction[f] != false)
	            this.eventAction[f].apply(this, arguments);
	};
};

The basic idea is this: you have an eventAction queue , where we will store a list of functions that should be called when the event is triggered (event listeners). To push new functions to this queue we use the subscribe method. We also have an unsubscribe method, for when we want to remove one of the listener functions from the queue. The last function called “fire” in the object is used to trigger the event.

So, to illustrate this in code, here is how you would use this event object. First, we create a new instance of this event. In this case, I use this event to signal when I finish initializing a map.

1
var onMapReady = new JSEvent();

Then, we add a function to be called at the end of the map initialization, in this case called map_ready.

1
onMapReady.subscribe(map_ready);

Finally, at the end of our map initialization, or wherever we want the event to occur, we call the fire() method. Any argument that we pass here to the fire method will be passed to the subscribed function, in this case, the map_ready function.

1
onMapReady.fire(arg1, arg2, argx);

Hope it helps ;)

UPDATE 1

In order for this to work you will need jQuery or to implement yourself a method to search if an element is inside an array, like the $.inArray() method provided by jQuery. This is how the inArray is implemented in jQuery:

1
2
3
4
5
6
7
8
9
10
11
function inArray(elem, array) 
{
	if ( indexOf ) 
		return indexOf.call( array, elem );
 
	for ( var i = 0, length = array.length; i < length; i++ ) 
		if ( array[ i ] === elem )
			return i;
 
	return -1;
}

UPDATE 2

Improved a little bit the fire function to pass the arguments array as a list of arguments to the subscribed function, not as a simple array as the first argument. So instead of this:

1
2
3
4
5
6
	this.fire = function() 
	{
		for (f=0;f<this.eventAction.length;f++)
	        if (this.eventAction[f] != false)
	            this.eventAction[f](arguments);
	};

now we have this:

1
2
3
4
5
6
	this.fire = function()
	{
		for (f=0;f<this.eventAction.length;f++)
	        if (this.eventAction[f] != false)
	            this.eventAction[f].apply(this, arguments);
	};

Comments

One Response to “Custom JavaScript events”
  1. Krishna says:

    Learned new thing in Javascript today. This website is very useful for developers.

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!