↑
Main Page

Opera 7.5

if (oEvent.ctrlKey) {

arrKeys.push(“Ctrl”);

}

if (oEvent.altKey) {

arrKeys.push(“Alt”);

}

oTextbox.value += “\n keys down are “ + arrKeys;

}

</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>

This example is an update of the previous one with more information displayed in the text box. Here,

the properties just mentioned are output in addition to the event type. One line to take note of is where

the code

(oEvent.target || oEvent.srcElement).id

appears. Remember that when the logical

OR operator is used with two objects, it always returns either the first or the non-

null

object. In this

case, it is used to determine which property holds the event target and then to return the

attribute.

For

mouseover

and

mouseout

events have additional properties. In IE, the property

fromElement

con-

tains the element the cursor moved from and

toElement

contains the element that the cursor moved to.

For

mouseover

toElement

is always equal to

srcElement

whereas on

mouseout

fromElement

always equal to

srcElement

. You can test this for yourself:

<html>

<head>

<title>IE Mouse Events Example</title>

function handleEvent(oEvent) {

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

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

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

Opera 7.5 has a bug when detecting the various keys (Shift, Ctrl, and Alt). It incor-

rectly reports a Shift key as a Ctrl key and vice versa. Additionally, it doesn’t detect

the Alt key at all. Use these properties with caution if you plan on supporting Opera.

282

Chapter 9

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