↑
Main Page

DOM Mouse Events Example

if (oEvent.fromElement) {

oTextbox.value += “\n fromElement is “ +

oEvent.fromElement.tagName;

}

if (oEvent.toElement) {

oTextbox.value += “\n toElement is “ +

oEvent.toElement.tagName;

} }

</script>

</head>

<body>

<p>Use your mouse to click and double click the red square.</p>

<div style=”width: 100px; height: 100px; background-color: red”

onmouseover=”handleEvent(event)”

onmouseout=”handleEvent(event)”

onmousedown=”handleEvent(event)”

onmouseup=”handleEvent(event)”

onclick=”handleEvent(event)”

ondblclick=”handleEvent(event)” id=”div1”></div>

</body>

</html>

Because of this redundancy, the DOM supports only one

event

property called

relatedTarget

for

both

mouseover

and

mouseout

. On a

mouseover

event,

relatedTarget

points to the element that cur-

sor moved from; on a

mouseout

event,

relatedTarget

points to the element that cursor moved to. You

can modify the previous example to test this:

<html>

<head>

<title>DOM Mouse Events Example</title>

function handleEvent(oEvent) {

var oTextbox = document.getElementById(“txt1”);

oTextbox.value += “\n>” + oEvent.type;

oTextbox.value += “\n target is “ + oEvent.target.tagName;

oTextbox.value += “\n relatedTarget is “ +

oEvent.relatedTarget.tagName;

}

</script>

</head>

<body>

<p>Use your mouse to click and double click the red square.</p>

<div style=”width: 100px; height: 100px; background-color: red”

onmouseover=”handleEvent(event)”

onmouseout=”handleEvent(event)”

onmousedown=”handleEvent(event)”

onmouseup=”handleEvent(event)”

onclick=”handleEvent(event)”

ondblclick=”handleEvent(event)” id=”div1”></div>

</body>

</html>

283

All about Events

12_579088 ch09.qxd 3/28/05 11:39 AM Page 283