Demo #1 of how MooTools facilitates JavaScript programming in the browser environment: elements and events.

This first demo is meant to demonstrate some of MooTools' capabilities for simplifying and enhancing JavaScript programming in the browser environment. Prerequisites for understanding the coding of this demo are some experience with HTML, CSS styles, and JavaScript; however, expertise is not required. To really appreciate MooTools' browser-independence, one should read about the various browser incompatibilities that exist and MooTools deals with... but we're not going to explore the incompatibilities in these demos. (See Pro JavaScript with MooTools for a more comprehensive treatment). The following capabilities are demonstrated in this demo.

Selecting a single page element (DOM element) using its ID.
Simple cases of selecting multiple DOM elements (MooTools' selector capabilities are much more flexible than shown here).
Getting and setting page elements' text and styles (singly and sometimes multiply) when mouse click events occur.
Events for forms elements.
Adding events singly and multiply to an element.
The domready event.

MooTools deals with browser dependencies and quirks so that you don't have to. Aside from DOM element selection, attributes, and events, one should learn certain MooTools methods on Arrays and Objects, and learn to create and use Classes; these are not demonstrated here.

The JavaScript for this demo uses MooTools functions/methods even when a native JavaScript capability exists and is not browser-dependent.

This demo is tutorial and instructive but neither production-efficient nor 'unobtrusive'. The intention here is to allow the user to modify the JavaScript code in this file and rerun it without needing their own webserver. (However, never save and execute web pages containing JavaScript except from persons you trust; JavaScript can pose a Trojan Horse security risk to your computer.)

Some inline styles have been included that should be in CSS in production. This MooTools library is the full v1.3.1 'core' download (but not 'more') (with v1.2 compatibility disabled), uncompressed to facilitate learning (not efficiency).

As you run this demo and interact with it, also view the page source and read through the JavaScript scripts in the head of the document. If you view the source in an editor, use an editor that colorizes based on html and JavaScript syntax and keywords (and can display tabs as two spaces). It is too early to read the downloaded MooTools file but you could take a quick look.

Do this demo from a PC or Mac first. Mouse events are different on mobile devices. If you want to try this on a mobile device, try a PC or Mac first.

Click here! Clicking here does nothing.

Click anywhere in the box!

(Paragraph within the box)

(Paragraph within the box) Click here to change the text color of all html paragraphs in the document (but not headings, list items, anchors, etc.). There are two separate click event handlers attached to this paragraph element.

(List item within the box)
(List item within the box) Doubleclick here to change the text color and italicization of all html list items in the box (but not paragraphs, etc.). The doubleclick event is separate from the (single) click event that is also attached to this element. (Dblclick did not seem to fire for me on IE but I am releasing this demo anyway.)
(List item within the box)
(List item within the box)

(Paragraph within the box)

(Paragraph outside the box) Multiple events are attached to this paragraph element but I am reporting the events in the next paragraph to avoid annoying looping. Move your mouse in and and out of this paragraph element: see the mouseover and mouseout events. Hold your mouse down here then let it up: see the mousedown, mouseup, and click events. Hold your mouse down here, move it out of this paragraph element, back into this element, then let it up. (I am not showing mousemove.)

(Paragraph outside the box) Display here some events attached to the prior paragraph element. Events:

(Paragraph outside the box) Display here some events attached to the following form input text box element. Click in the text box: see the focus event. Press a keyboard key: see the keydown, keypress, and keyup events. Move your mouse out of the text box and click somewhere else: see the blur event. Multiple events are attached to the text box element. Events: