JQuery trigger() Method : How to Create Custom Events in jQuery

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?