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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint