Java Reference
In-Depth Information
Property
Description
client.x
The horizontal position of the mouse relative to the client area.
client.y
The vertical position of the mouse relative to the client area.
target
The event target.
relatedTarget
The element related to the event target.
type
The type of event that called the event handler.
Visit http://mootools.net/docs/core/Native/Event for a complete list of properties of
MooTools' Event object.
For example, the following code registers an event handler for the click event on an element with an
id of myDiv:
function myDiv_onclick(e)
{
var eSrc = $(e.target).addClass(“myClass”);
alert(“You clicked at X:” + e.client.x + “ Y:” + e.client.y);
}
$(“myDiv”).addEvent(“click”, myDiv_onclick);
When the event fi res and executes myDiv_onclick(), a MooTools Event object is passed to the func-
tion. The fi rst line of the function extends the event target element and calls the addClass() method,
adding the myClass CSS class to the element. The addClass() method returns the extended Element
object, which you store in the eSrc variable. You then use an alert box to display the mouse pointer's
coordinates relative to the viewport by using the client.x and client.y properties.
Rewriting the DHTML Toolbar with MooTools
You've been introduced to MooTools DOM manipulation capabilities, so let's put them to good use and
rewrite the DHTML toolbar from Chapter 12 (again!).
Try It Out Revisiting the Toolbar with MooTools
Open your text editor and type the following:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 15: Example 7 with MooTools</title>
<style type=”text/css”>
.tabStrip
{
Search WWH ::




Custom Search