In my previous article, How to Create Custom Events in JavaScript, we discussed the benefits of custom events and the native CustomEvent object. To recap, we can fire our own named events. The demonstation page provided a form which fired a “newMessage” event whenever a valid message was submitted. Any number of handlers can subscribe to this event to perform their own actions.

Our only problem: CustomEvent is not currently supported in Safari or Internet Explorer.

There are ways around the browser compatibility issue. One solution is to write your own event encapsulation functions which implement custom event functionality. Fortunately, there’s no need: custom events are supported in several JavaScript libraries including jQuery.

jQuery’s .trigger method is the key. You can trigger an event with a new type name and arbitrary data at any point, e.g.


$.event.trigger({
	type: "newMessage",
	message: "Hello World!",
	time: new Date()
});

Handlers can now subscribe to “newMessage” events, e.g.


$(document).on("newMessage", newMessageHandler);

Demonstration Page

This example demonstrates the jQuery code:

View the jQuery Custom Events demonstration page

A standard event handler looks for submissions on an HTML form. The function gets the current message and, assuming it’s valid, dispatches a new “newMessage” event.


$("#msgbox").on("submit", SendMessage);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = $("#msg").val().trim();
	if (msg) {
		$.event.trigger({
			type: "newMessage",
			message: msg,
			time: new Date()
		});
	}

}

Handlers can now subscribe to “newMessage” events. The events are only raised if there’s a valid message:


// newMessage event subscribers
$(document).on("newMessage", newMessageHandler);

// newMessage event handler
function newMessageHandler(e) {
	LogEvent(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.time.toLocaleString()+": "+e.message
	);
}

The message itself can be extracted from the message property of the event object.

Browser Compatibility

jQuery 1.x methods run in any browser including Internet Explorer 6.0 and above. Obviously that’s a huge bonus even if the code runs (un-noticeably) slower than native CustomEvents. However, be aware that jQuery 2.0, planned for release in 2013, will not support IE6, 7 and 8.

jQuery is popular, but custom events are supported in most JavaScript libraries including Prototype, Mootools and YUI.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like jQuery: Novice to Ninja: New Kicks And Tricks.

Comments on this article are closed. Have a question about jQuery? Why not ask it on our forums?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • http://www.sms-bazaar.com sms bazaar

    thnkss buckler nice useful post

  • http://notengoidea.com.ve Hugo Cabrera

    Thanks!!!

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.