November 17, 2000 - Browser-Independent Event Probing | WebReference

November 17, 2000 - Browser-Independent Event Probing

Yehuda Shiran November 17, 2000
Browser-Independent Event Probing
Tips: November 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

In many applications, you need to access the event object. For example, the mouse location can be found by the clientX and clientY properties on Internet Explorer. In Internet Explorer, the mouse object is readily available. In Netscape Navigator, though, you need to capture each event explicitly:

if (navigator.appName == "Netscape") {
  document.captureEvents(Event.CLICK);
}
Once the event has been captured, you need to handle it via the event handler. The two browsers expose their event objects differently. In Internet Explorer, the word event is reserved. The event object is global. You access its property in a uniform way. The pageX and pageY event properties are accessed as event.pageX and event.pageY. In Netscape Navigator, the event object is passed as a parameter to the event handler. Let's see an example. This tip has been programmed to print, upon clicking, the location of the mouse. Here is the script:

if (navigator.appName == "Netscape") {
  document.captureEvents(Event.CLICK);
}
document.onclick = printEvent;
function printEvent(e) {
   if (navigator.appName == "Microsoft Internet Explorer"){
    mX = event.clientX;
    mY = event.clientY;
  }
  else {
    mX = e.pageX;
    mY = e.pageY;
  }
  alert("Click at x = " + mX + " and y = " + mY);
}
Notice the required actions above. We first capture the CLICK event in Netscape Navigator. Then we define the onclick event handler, printEvent. This printEvent() function uses the event reserved word for the event object in Internet Explorer, and the parameter e as the event object in Netscape Navigator.

Learn more about the event models in Column 9, The Navigator Event Model, Column 10, The Explorer Event Model, and Column 11, The Cross-Browser Event Model.