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.

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.

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.

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:

1
2
3
4
5
6
7
8
9
10
11
12

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.

1
2
3
4
5
6
7
8
9
10
11
12
13

// 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.

Changes (and I quote!) to Core

• Fixed Slick bug with ~div-like selectors
• Fixed MooTools in the Node.js environment
• Fixed an exception in DOMReady in Chrome when the page with MooTools was in an IFrame
• Fixed setOpacity for very small numbers in IE
• Fixed an exception in FireFox 4 when MooTools tried to overwrite document.head
• Added the possibility to create elements with boolean values with an selector, e.g. new Element(‘input[checked]‘);

Changes to More (that I also quote):

• Rewritten Element.Position which solved some issues
• Added Table, as described above
• Ironed out some Event Delegation issues
• Additional fixes can be found at the Lighthouse for 1.3.2.1

Yay, MooTools developers! You guys are seriously stepping up with a quicker release. In the words of my friend David Walsh: MooTools FTW!

Changes (and I quote!)

• Lots (and by that I mean LOTS) of documentation improvements, clarifications and cleanups
• Updated Slick to 1.1.5 and improved the speed of our Slick selector engine
• Added delegation support for submit, focus, blur, reset, change and select events in MooTools More
• If available the native JSON methods are now used in JSON.decode and JSON.encode
• Multiple Pseudos click:relay(a):once (demo)
• Two new pseudo events: :throttle and :pause
• Added String.truncate to String.Extras in More
• More than two hundred changes to increase the stability of both Core & More

MooTools Dev, you’ve been quite awesome. Keep up the great work!

Oh yeah, I’m still alive, if you were wondering..

Problem

The issue is that usually an event is added and the default behavior is disabled.

1
2
3
4

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

And if you just so happen to need to trigger the event manually, like so:

1

$('myLink').fireEvent('click');

You’ll get an error that the stop method doesn’t exist. This is because you’re just firing the function and an event argument is not being passed into the function.

Now, lets say you have a class and you wanted to manually execute a method that’s being attached to an event. An error would also occur in this case.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var myClass = new Class({
    // ... some code here..
 
    // the click event function that is attached..
    clicky: function(e){
        e.stop();
        //.. do some clicky stuff
    }
 
});
 
// create instance of class
var instance_of_myClass = new myClass();
 
// firing clicky function
instance_of_myClass.clicky(); // results in error because stop() does not exist

Solution

Here’s how you can solve both problems, and I learned this from Mark Obcena. This is very useful if you don’t want to modify the classes code or extend it. Pass in a dummy object with an empty stop function:

1
2
3
4
5

// this will fire the click event without an issue
$('myLink').fireEvent('click', {stop:$empty});
 
// this too will fire the clicky function on the instance without an issue
instance_of_myClass.clicky({stop:$empty});

Tada! Thanks David and Mark!

Check out all the details from the MooTools blog!

Core

• Element: MooTools compatibility mode: the $ function is only defined if no pre-existing $ function is found. If an existing $ function is found, you can use document.id()
• Element: changed internal instances of $ to document.id
• Core: fix for server-side MS JScript 5.x; makes MooTools more friendly for server side programming
• Class: Class doesn’t require Browser, removed from scripts.json
• Element: Fixes for set/get Property
• Element.Dimensions: fix for webkit body.scrollTop inconsistency, getBoundingClientRect used whenever possible (not just for Trident), renaming element.position to element.setPosition; adding docs for the method; alias is included in-line for compatibility
• Hash: Hash extend no longer uses the window if no arguments supplied
• Request: clearing Request readystate before calling success or failure;
• Selectors: Added :enabled pseudoselector, was in the Docs but not implemented.
• Docs: Fixed docs headers for first-child, last-child, and only-child.
• Internal: UnitTester test suite is now a git submodule
• Numerous small fixes, speed improvements, documentation tweaks, etc.

More

• Per the change in -core, $ is no longer used (uses document.id instead)
• Element.Measure: trying cssText solution for Element.expose (again).
• Element.Forms: swapping feature detection for browser support per
• Date: Massive refactoring of Date.js and Date.Extras.js
• Drag.Move: Fixing drag with grid issues
• IframeShim: altering zindex assignment in IframeShim to better ensure that it’s always underneath the shimmed element, updating Iframeshim’s empty document creation; fixes https issues in IE6
• FormValidator: reworking formvalidator scroll-to logic to be a little more efficient
• OverText: preventing overtext from focusing on inputs except when they are interacted with (so OverText.update() does not focus an input);now stops polling when elements are hidden (when polling is enabled)
• Fx.Scroll: adding scrollIntoView method – scrolls an element so that it is completely visible; if below the view, scrolls down until it is at the bottom of the screen, if above, scrolls up until it is at the top.
• JSONP: was calling (the deprecated) this.request instead of this.send during retries
• URI: Adding set(‘data’, obj) to set
• Assets: adding error callback for Assets.images
• Tips: removing dependency for Element.Measure for Tips; updating CSS class name in OverText
• Numerous small fixes, speed improvements, documentation tweaks, etc.

Great job MooTools-Dev team!

Well, you can also pull these properties by using an undocumented method in MooTools, as I just learned from Mark Obcena. How? It’s very simple as you will see.

Code

1
2

var selector_rules = new Fx.CSS().search('.some_class');
// returns an object with camelCase key's

See, isn’t that simple? Keep in mind that this doesn’t give you every single property. In my tests of running this code with Firebug on GameSpot.com, font-family and overflow properties were missing in the returned object when it clearly shows up in Firebug’s CSS panel.

I understand it’s like re-inventing the wheel. But in order to improve, we should always scrutinize work because a better solution may be available.

Here’s my first attempt, with the MooTools class, TextOverlay. If you look closely, it’s MooTools-More OverText modified to give the user more options.

What’s the Difference?

You must be wondering what’s different between the two. Well, I felt that positioning of the element should be handled by css, so I removed the reposition method. In OverText, the text-overlaying was created for you with MooTools and the default element was a ‘div’ with ‘label’ as your option. I did away with that and you now can either pass in an existing DOM element, or create one on the fly (though you’ll need to inject it into the DOM yourself). OverText ‘show’ and ‘hide’ methods explicitly call’s the text-overlay’s show/hide methods and then fires custom events ‘textShow’ and ‘textHide’. I decided to give the user flexibility by removing the explicit call’s to the text-overlay’s and only firing the custom events.

Example

The HTML, CSS, and JavaScript below is an example of how to set things up.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="container">
    <form id="textoverlay_test" name="textoverlay_test" action="" method="post">
        <fieldset>
            <legend></legend>
            <div class="fields">
                <input id="first_name" type="text" name="first_name" value="" />
                <label for="first_name">First Name</label>
            </div>
            <div class="fields">
                <input type="text" name="last_name" value="" />
                <label for="last_name">Last Name</label>
            </div>
        </fieldset>
    </form>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.container {
    margin:0 auto;
    width:500px;
}
 
input, label {
    border:0;
    display:block;
    font:11px arial, veranda, helvetica, sans-serif;
    height:16px;
    line-height:16px;
    margin:0;
    padding:0 5px;
    width:100%;
}
 
label {
    display:none;
    cursor:pointer;
    margin-top:-16px;
}
 
.fields {
    border:1px solid #333;
    margin-bottom:10px;
    overflow:hidden;
    padding:5px;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14

window.addEvent('domready', function(){
    var input, label, fields = $$('#textoverlay_test .fields').each(function(item){
        new TextOverlay(item.getElement('input'), item.getElement('label'),{
            onTextHide: function(element, text){
                text.setStyle('display','none');
                alert('hide'); //added to differentiate from default textHide event
            },
            onTextShow: function(element, text){
                text.setStyle('display','block');
                alert('show'); //added to differentiate from default textShow event
            }
        });
    });
});

Doing all this should simplify things and decrease the number of function calls. If you did a ‘console.profile’ in Firebug, I’m sure you’ll notice the difference between OverText and TextOverlay. Give it a try and let me know what you think! I’ve set it up in Github.

Features (straight from the horses mouth)

• Browse through Files and Folders on your Server
• Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
• View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
• Nice User Interface
• Upload Files via FancyUpload (integrated Feature)
• Option to automatically resize big Images when uploading
• Use it to select a File anywhere you need to specify one inside your Application’s Backend
• Use as a FileManager in TinyMCE
• Provides your Client with the most possible convenience ( ;D )

The back-end is in PHP but you can port it to whatever language you’re working with. The file manager is also released under the MIT-License. This is currently his RC1 (1st release candidate, for those not in the know). Head over to check out his demos!

Great job, Christoph!