Java Reference
In-Depth Information
}
if (e.type == “mouseout”)
{
e.target.className = “”;
}
}
If the event is a
mouseover
, then the paragraph's CSS class is assigned the
underline
class defi ned in
the page's style sheet. If the event type is
mouseout
, then the element's
className
property is cleared,
which returns the text to its original style. This style-changing code runs only if the element that
caused the event is a paragraph element.
Next, the function determines if the user clicked their mouse by again checking the type property.
if (e.type == “click”)
{
alert(“You clicked the mouse button at the X:”
+ e.clientX + “ and Y:” + e.clientY + “ coordinates”);
}
}
If the user did indeed click somewhere in the page, then you use the
alert()
method to display the
contents of the
clientX
and
clientY
properties of the
mouse
event object on the screen.
The MouseEvent object supplied to this function is overwritten and re-created every time you generate
an event, so the next time you click the mouse or move the pointer it creates a new MouseEvent object
containing the coordinates for the x and y positions and the information on the element that caused the
event to fi re. One problem that precludes greater discussion of the DOM event model is the fact that not
all browsers support it in any detail. Specifi cally, IE, the most popular browser, doesn't fully support it.
Despite the lack of support for the DOM standard, you can still acquire the same useful information on
a given event with IE's event model.
Event Handling in Internet Explorer
IE's event model remains relatively unchanged since the introduction of IE4 in 1997. It incorporates the
use of a global event object (it is a property of the window object), and one such object exists for each
open browser window. The browser updates the event object every time the user causes an event to
occur, and it provides information similar to that of the standard DOM Event object.
Accessing the event Object
Because the event object is a property of window, it is very simple to access.
<p ondblclick=”handle()”>Paragraph</p>
<script type=”text/javascript”>
function handle()
{
alert(window.event.type);
}
</script>
