Java Reference
In-Depth Information
if (event.type == “mouseout”)
{
event.srcElement.className = “”;
}
}
if (event.type == “click”)
{
alert(“You clicked the mouse button at the X:”
+ event.clientX + “ and Y:” + event.clientY + “ coordinates”);
}
}
document.onmouseover = handleEvent;
document.onmouseout = handleEvent;
document.onclick = handleEvent;
</script>
</head>
<body>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
</body>
</html>
Save this as
ch12_examp9.htm
, and load it into IE. It'll look and behave exactly like Example eight;
the paragraph text will change to red and have an underline as you move your mouse pointer over the
paragraphs. When your mouse pointer leaves a paragraph, the text returns to the original state. When
you click your mouse, an alert box tells you the coordinates of where your mouse pointer was when you
clicked.
You assign the handleEvent() function to handle the mouseover, mouseout, and click events on the
document object.
document.onmouseover = handleEvent;
document.onmouseout = handleEvent;
document.onclick = handleEvent;
When you cause any of these events to fi re, the browser updates the
event
object and calls the
handleClick()
function.
function handleEvent()
{
if (event.srcElement.tagName == “P”)
{
First, check the source element's tagName property and see if it is P. If it is, then you check what kind of
event occurred by using the type property.
if (event.type == “mouseover”)
{
event.srcElement.className = “underline”;
}
if (event.type == “mouseout”)
{
