Java Reference
In-Depth Information
Figure 12-15
Now click OK, move the pointer in the browser window, and click again. A different result appears.
This example is consistent with the event-handling behavior: The browser waits for an event, and every
time that event occurs it raises the corresponding function. It will continue to wait for the event until
you exit the browser or that particular web page. In this example, you assign event handlers for the
mouseover, mouseout, and click events on the document object.
document.onmouseover = handleEvent;
document.onmouseout = handleEvent;
document.onclick = handleEvent;
One function, handleEvent() handles all three of these events.
Whenever any of these events fi re, the
handleClick()
function is raised and a new
MouseEvent
object
is generated. Remember that
MouseEvent
objects give you access to
Event
object properties as well as
MouseEvent
object properties, and you use some of them in this example.
The function accepts the MouseEvent event object and assigns it the reference e.
function handleEvent(e)
{
if (e.target.tagName == “P”)
{
Inside the function, the fi rst thing you do is check if the event target (the element that caused the event)
has a
tagName
of
P
. If the target is a paragraph element, then the next bit of information you need to
fi nd is what kind of event took place by using the
type
property.
if (e.type == “mouseover”)
{
e.target.className = “underline”;
