Java Reference
In-Depth Information
This code fi nds the element with an id of myLink and removes it from the DOM. There's no need to
fi nd the element's parent and call the removeChild() method.
Using Events
When you extend an Element object with the dollar sign function, you gain access to the observe()
method, which registers an event handler on a DOM element. This method accepts two arguments: the
name of the event to observe for and the function to call when the event fi res.
function myDiv_click(event)
{
// do something
}
$(“myDiv”).observe(“click”, myDiv_click);
This code registers the myDiv_click() function to handle the click event on the element with an id
of myDiv. This isn't the only way to assign event handlers; you can use the Event.observe() method,
too. The following code writes the previous code using Event.observe():
function myDiv_click(event)
{
// do something
}
Event.observe(“myDiv”, “click”, myDiv_click);
The fi rst argument to Event.observe() can be a string value containing an element's id, or a BOM/
DOM object you want to assign an event handler to, like window or document. This method is particularly
useful for objects like window; you cannot pass window to the dollar function and use the observe()
method because the browser will throw an error. Instead, you have to use Event.observe().
Unlike jQuery, Prototype doesn't emulate the W3C DOM event model. In fact, it doesn't aim to create a
separate, unifying event model at all. Instead, it extends the event objects of both browsers and gives
you a set of utility methods to obtain the information you want to acquire.
These methods are of the extended browser's Event object. For example, the element() method accepts
an IE or W3C event object as a parameter and returns the value of the srcElement and target proper-
ties for IE and W3C DOM browsers, respectively.
For example, the following code gets the element that fi red the event and toggles a CSS class called
someClass:
function myDiv_click(event)
{
var eSrc = event.element();
eSrc.toggleClassName(“someClass”);
}
$(“myDiv”).observe(“click”, myDiv_click);
