MooTools Core Has Your (Element.NativeEvents) Back

While scanning through MooTools-Core code the other day, I came across Element.NativeEvents and forgot what the value in each property meant. I remember asking MooTools-Core devs about it probably three to four times. You may be wondering \”What\’s the point?\” Well, let me tell you.

Event Types

There are three types to what the value can be in the property: 0, 1, or 2.

Type 0 doesn\’t usually appear in Element.NativeEvents because custom events are type 0 by default. Adding a custom event to the Element.NativeEvents object and setting it to type 0 is the same as it not existing in the object. Custom events need to be triggered with the fireEvent method.

[iframe style=\”width: 100%; height: 300px\” src=\”http://jsfiddle.net/garrickcheung/XDFq5/embedded/\” allowfullscreen=\”allowfullscreen\” frameborder=\”0\”]

Note: fireEvent method can also trigger native events.

Type 1 represents events that don\’t have event information passing into the callback function. domready and load are two examples of events that don\’t pass an event argument into the function attached to the event.

[iframe style=\”width: 100%; height: 300px\” src=\”http://jsfiddle.net/garrickcheung/pX9F2/embedded/\” allowfullscreen=\”allowfullscreen\” frameborder=\”0\”]

Type 2 represents events that DO have event information passing into the callback function. It also helps normalize the event object that is passed in. click, focus, and blur are three examples.

[iframe style=\”width: 100%; height: 300px\” src=\”http://jsfiddle.net/garrickcheung/YEnwa/embedded/\” allowfullscreen=\”allowfullscreen\” frameborder=\”0\”]

It\’s Important Because…

MooTools or any other lib/plugin built with MooTools may not have added support for a native event that you need. With the knowledge of native event types, you can easily add them to the Element.NativeEvents object.

At the time of this writing, MooTools-Core 1.4.5 Element.NativeEvents objects code looks like:

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
	orientationchange: 2, // mobile
	touchstart: 2, touchmove: 2, touchend: 2, touchcancel: 2, // touch
	gesturestart: 2, gesturechange: 2, gestureend: 2, // gesture
	focus: 2, blur: 2, change: 2, reset: 2, select: 2, submit: 2, paste: 2, input: 2, //form elements
	load: 2, unload: 1, beforeunload: 2, resize: 1, move: 1, DOMContentLoaded: 1, readystatechange: 1, //window
	error: 1, abort: 1, scroll: 1 //misc
};

They show the native events that are available, but by no means is it a comprehensive of every single event out there.

With this list, you can basically add any native event listed to an element.

// Create an image element.
var element = new Element(\'img\');

// Attach the load event. It\'s a Type 1 so data isn\'t passed into the function
element.addEvent(\'load\', function(){
    // Once the image has loaded, inject it into the document body.
    this.inject($(document.body));
});

// Change the element\'s source so it will start loading an image.
// Setting the src of an image will automatically make it begin downloading.
// Once that\'s complete, it will trigger the load event that\'s attached to the element.
element.set(\'src\', \'http://somePath.com/img/abcd.jpg\');

More information about Element.NativeEvents has been added to the MooTools documentation.