JavaScript Frameworks - Beginning JavaScript - page 578

This code fi nds the element with an id of myLink and then removes it from the DOM by calling the
dispose() method.

Using and Handling Events
When you extend an Element object with the $() function, MooTools adds the addEvent() method to
the element. This method attaches an event handler to the element for a specifi ed event. The following
code is an example of its use:

function myDiv_click(event)
{
alert(“You clicked me!”);
}

$(“myDiv”).addEvent(“click”, myDiv_click);

The addEvent() method accepts two arguments: the fi rst is the event to watch for, and the second is a
function to handle the event when it fi res.

The window and document objects automatically have the addEvent() method added to them by
MooTools.

You can register multiple event handlers at one time with the addEvents() method. This method
accepts an object whose property names mirror those of event types, and their values are the functions
you want to handle the events with.

For example, the following code registers event handlers for the mouseover and mouseout events on an
element:

function eventHandler(e)
{
// do something with the event here
}

var handlers = new Object();
handlers.mouseover = eventHandler;
handlers.mouseout = eventHandler;

$(“myDiv”).addEvents(handlers);

When an event fi res, and if the handler was set via the addEvent() or addEvents() method, MooTools
passes its own Event object to the event handling function. This object has its own set of proprietary
properties, some like the W3C Event and MouseEvent objects, and some unlike any property from
either the IE or W3C event models even though they offer the same information. The following table lists
some of the properties available with MooTools' Event object.

Property Description

page.x The horizontal position of the mouse relative to the browser window.

page.y The vertical position of the mouse relative to the browser window.