Custom Events in jQuery

from http://blogs.sitepointstatic.com/examples/tech/custom-events/jquery.html

by Justin Breen

HTML

<h1>Custom Events in jQuery</h1>

<p>This demonstration creates a new event type named "newMessage" which is fired whenever a valid message is submitted. The event can be delegated to any number of subscribers.</p>

<p>For more information, refer to <a href="http://www.sitepoint.com/jquery-custom-events/">How to Create Custom Events in jQuery</a>.</p>

<form id="msgbox" action="#" method="get">
<fieldset>
<label for="msg">your message</label>
<input id="msg" value="" />
<button>SEND</button>
</fieldset>
</form>

<pre id="log">Event information log
=====================
</pre>

JavaScript

// elements
var log = $("#log")[0];

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


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


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


// 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()
		});
	}

}

$.event.trigger({
    type: "newMessage",
    message: 'booger',
    time: new Date()
});


// log event in console
function LogEvent(msg) {
	log.textContent += msg + "\n";
	var ot = log.scrollHeight - log.clientHeight;
	if (ot > 0) log.scrollTop = ot;
}