Java Reference
In-Depth Information
MooTools has a $() function, just like Prototype's:
var buttonObj = $("theButton");
It accepts either a string containing an element's id or a DOM element and returns the DOM object
with an extended set of methods and properties. One such method is the addEvent() method which,
as you probably deduced, registers an event listener.
The addEvent() method accepts two arguments: the event name and the function. So, you can
register an event listener like this:
function buttonClick() {
alert("You clicked the button!");
}
 
buttonObj.addEvent("click", buttonClick);
MooTools' extension methods provide a variety of methods and properties for manipulating
elements in the page. Most of the methods are chainable, therefore allowing you to perform multiple
operations with less code. For example:
function buttonClick() {
$(document.body).setProperty("bgColor", "yellow")
.appendHTML("<h1>Hello, MooTools!</h1>");
}
 
buttonObj.addEvent("click", buttonClick);
You can set an element's attributes with the setProperty() method, as demonstrated in this code.
This method returns the element object, so you can then immediately append content to the element
by calling the appendHTML() method.
Use this code to test your MooTools' installation. Open your text editor and type the
following:
<!DOCTYPE html>
 
<html lang="en">
<head>
<title>Chapter 17: Example 5</title>
</head>
<body>
<button id="theButton">Click Me!</button>
<script src="mootools-core-1.5.1-compressed.js"></script>
<script>
var buttonObj = $("theButton");
 
function buttonClick() {
$(document.body).setProperty("bgColor", "yellow")
.appendHTML("<h1>Hello, MooTools!</h1>");
}
 
buttonObj.addEvent("click", buttonClick);
Search WWH ::




Custom Search