The Cross-Browser Event Model: The Event Object's Properties - Doc JavaScript | WebReference

The Cross-Browser Event Model: The Event Object's Properties - Doc JavaScript


The Event Object's Properties

The following table lists the equivalent properties of the event object in Internet Explorer 4.0x and Navigator 4.0x:

Navigator 4.0x Description Internet Explorer 4.0x
Property Value Value Property
modifiers Event
object
properties
Specifies which modifier keys, if any, were pressed when the event occurred. Notice the different implementation in Navigator 4.0x and Internet Explorer 4.0x. Boolean altKey
ctrlKey
shiftKey
pageX Integer Specifies the horizontal coordinate of the mouse cursor at the time of event, with respect to the target object's page (the browser window). Integer clientX
pageY Integer Specifies the vertical coordinate of the mouse cursor at the time of event, with respect to the target object's page (the browser window). Integer clientY
screenX Integer Specifies the horizontal coordinate of the mouse cursor at the time of event, with respect to the client's screen. Integer screenX
screenY Integer Specifies the vertical coordinate of the mouse cursor at the time of event, with respect to the client's screen. Integer screenY
target Object A reference of the object for which the event is intended. In other words, this is the object that fired the event. Object srcElement
type String Specifies the event type (e.g., "click", "mousedown", "keypress"). Notice that the string represents an event, not an event handler. String type
which Integer Specifies the mouse button or keyboard key code. Note that Internet Explorer 4.0x utilizes two different properties, whereas Navigator 4.0x uses only one. Also note that some code values differ with the browser. Integer button
keyCode

This table lists only the properties that are supported by both browsers, although not necessarily under the same name. For example, both browsers feature a property that reflects the event's intended target. In Navigator 4.0x, this is the target property, whereas Internet Explorer 4.0x supports it in the form of the srcElement property. Notice that the blue text represents properties and data types that are different, while the red text represents indentical properties and data types. Although we specified that Navigator's pageX and pageY properties are equivalent to Internet Explorer's clientX and clientY properties, this is only half-true. The clientX and clientY properties do not take into account any page segment that has scrolled scrolled off the viewable portion of the window. In other words, they only reflect the position of the cursor with respect to the browser's physical window. A simple set of mathematical equations shows how pageX and pageY (Navigator 4.0x) relate to clientX and clientY (Internet Explorer 4.0x):

pageX = clientX + document.body.scrollLeft;
pageY = clientY + document.body.scrollTop;

The following example displays the location of the mouse cursor (with respect to the page, not the browser window) in the browser's status bar:

<SCRIPT LANGUAGE="JavaScript">
<!--
var nav4 = window.Event ? true : false;
function displayLocation(e) {
  var str = "";
  if (nav4) { // Navigator 4.0x
      str += "X=" + e.pageX;
      str += ", ";
      str += "Y=" + e.pageY;
  } else { // Internet Explorer 4.0x
      str += "X=" + (event.clientX + document.body.scrollLeft);
      str += ", ";
      str += "Y=" + (event.clientY + document.body.scrollTop);
  }
  window.status = str;
}
if (nav4) // Navigator 4.0x
  document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = displayLocation;
// -->
</SCRIPT>

As you can see in the preceding table, pageX and pageY in Navigator 4.0x are not equivalent to clientX and clientY in Internet Explorer 4.0x. Also notice that the parent object differs with the browser. In Navigator 4.0x, the parent object is passed to the function as an argument. In this example the function's parameter is named e, so the property pageX, for example, is referenced e.pageX. Internet Explorer 4.0x implements the event object as a property of the window object, so the clientX property can be referenced as:

http://www.internet.com


Created: January 13, 1998
Revised: January 14, 1998

URL: http://www.webreference.com/js/column11/eventobject.html