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:

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:

• window.event.clientX
• event.clientX