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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

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.


People who read this tip also read these tips:

Look for similar tips by subject:


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Installing and Using Meeplace, the Business Review CMS · Sending an HTML and Plain Text E-newsletter with ASP.NET, Part 2 · Create Multilingual Web Sites with Windows Unicode Fonts
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Top 10 Threats to Wireless Security · Poll: UC Uptake on the Rise · Review: Fluke AirCheck Wi-Fi Tester 1.0