JavaScript defining and using custom events

JavaScript/Ajax Add comments

kick it on DotNetKicks.com

What are custom events?

Simply, a custom event is something that happens that you feel is important enough to define actions to execute when this something happens. Clear as mud? I think I confused even myself. A custom event is just like a native event (onclick, onload, etc) except you define what it is and when it should fire.

Dustin Diaz explains custom events extemely well in his post about JavaScript custom events.

So why am I posting about it too? Well Dustin’s explaination and implementation uses the Yahoo User Interface library (YUI). I don’t use YUI. So I wrote up a simple class that allows you to implement custom events that is library independent.

The class

Here is the JavaScript class that is the base for our custom events.

var CustomEvent = function() {
	//name of the event
	this.eventName = arguments[0];
	var mEventName = this.eventName;

	//function to call on event fire
	var eventAction = null;

	//subscribe a function to the event
	this.subscribe = function(fn) {
		eventAction = fn;
	};

	//fire the event
	this.fire = function(sender, eventArgs) {
		this.eventName = eventName2;
		if(eventAction != null) {
			eventAction(sender, eventArgs);
		}
		else {
			alert('There was no function subscribed to the ' + mEventName + ' event!');
		}
	};
};

So here we have a class that defines the name of the event, subscribes a function to use, and a method to fire the event. Pretty simple.

Simple example

Here is a simple example of how to setup a custom event.

var myEvent = new CustomEvent("my event");
myEvent.subscribe(function(sender, eventArgs) {
	alert(eventArgs.message);
});

The above code creates an instance of CustomEvent and assigns a name of “my event”, how creative :D. Then it subscribes a function to the event via the subscribe method. The function that is subscribed will display an alert box with the value of the message event argument. The sender and eventArgs get passed when the event is fired. We’ll look at this next.

Firing the event

Finally we will fire the event. This can be done from anywhere in your application.

myEvent.fire(null, {
	message: 'you just witnessed the firing of a custom event called ' + this.eventName + '!'
});

We assigned a value of null to the sender argument because there is nothing that initiated the event fire in this case. If you had created this event in a photo gallery application and the event was to fire whenever a photo was inlarged (onEnlarge?) you would probably make the sender the photo that was enlarged. This would allow you to pass the photo to your enlarge method from inside the event. The possibilities are endless.

And lastly we assigned a value to message. Note that eventArgs is a JavaScript object (either { } or new Object()). This is important so you understand how to assign eventArgs properly.

Happy event creating.

Popularity: 94% [?]

If you liked this article consider subscribing to my free rss article feed to automatically get new articles in your feed reader.

One Response to “JavaScript defining and using custom events”

  1. Colleen Says:

    niceeeee…….

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Login