Implementing jQuery-Like Event Syntax in MooTools

If you take a peek inside the MooTools core Element/Events source code, you'll see the following collection of events:

Element.NativeEvents = {
	click: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, //mouse buttons
	mousewheel: 2, DOMMouseScroll: 2, //mouse wheel
	mouseover: 2, mouseout: 2, mousemove: 2, selectstart: 2, selectend: 2, //mouse movement
	keydown: 2, keypress: 2, keyup: 2, //keyboard
	focus: 2, blur: 2, change: 2, reset: 2, select: 2, submit: 2, //form elements
	load: 1, unload: 1, beforeunload: 2, resize: 1, move: 1, DOMContentLoaded: 1, readystatechange: 1, //window
	error: 1, abort: 1, scroll: 1 //misc
};

As you probably know, in order to add an event, you need to code something similar to:

	$('element').addEvent('click',function(e) {
		//do stuff
	});

In jQuery you code something like:

	$('#element').click(function(e) {
		//do stuff
	});

I don't prefer that syntax but if you're a Moo developer and you wanted to implement jQuery-like syntax for all events or you're slowly making your way from jQuery to MooTools, you can use the event collection cited above and the snippet to follow to quickly make that possible.

//hash the element.natives so we can do stuff with it
var hash = new Hash(Element.NativeEvents);
//remove items that need to be replaced, add their replacements
hash.erase('mouseover').erase('mouseout').erase('DOMMouseScroll');
hash.include('mouseenter',1).include('mouseleave',1);
//initialize this
var eventHash = new Hash({});
//for every event type, add to our hash
hash.getKeys().each(function(event){
	eventHash[event] = function(fn) {
		this.addEvent(event,fn);
		return this;
	}
});
//make it happen
Element.implement(eventHash);

Here's a few examples of using the newly implemented methods:

/* examples */
window.addEvent('domready',function() {
	$$('a').click(function(e) {
		e.stop();
		alert('mouse click');	
	});
	$$('a').contextmenu(function(e) {
		e.stop();
		alert('right click');	
	});
	$('myInput').keypress(function(e) {
		alert('key pressed: ' + e.key);
	});
});

Like I said, I don't find this syntax appealing, but I wanted to show how easy it is to do.