Java Reference
In-Depth Information
The function accepts the
MouseEvent
object and assigns it the reference
e
:
function handleEvent(e) {
var target = e.target;
var type = e.type;
if (target.tagName == "P") {
Inside the function, the first thing you do is initialize the
target
and
type
variables with the
target
and
type
event properties, respectively. These are convenience variables to make accessing that
information easier. You then check if the event target (the element that caused the event) has a
tagName
of
P
. If the target is a paragraph element, the next bit of information you need to find is what kind of
event took place by using the
type
variable:
if (type == "mouseover") {
target.className = "underline";
} else if (type == "mouseout") {
target.className = "";
}
}
If the event is a
mouseover
, the paragraph's CSS class is assigned the
underline
class defined in the
page's style sheet. If the event type is
mouseout
, 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 his mouse by again checking the
type
variable:
if (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, you use the
alert()
method to display the contents
of the
clientX
and
clientY
properties of the
MouseEvent
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 fire.
Let's look at another example.
a Crude tab Strip
trY it out
In this Try It Out, you will write a functional, yet flawed, tab strip using the
mouseover
,
mouseout
,
and
click
events. Open your text editor and type the following:
<!DOCTYPE html>
<html lang="en">
<head>
