How to Use JavaScript’s Mouse and Keyboard Event Objects to Program with HTML

The Mouse and Keyboard event objects in JavaScript are essentially the same. They provide the same properties and methods. The only difference is that you use one with a mouse and the other with the keyboard. The initialization technique also differs. The following list describes the properties used by both objects:

  • altKey: Returns true when the user pressed the Alt key at the time the event was triggered.

  • button: Specifies which mouse button was pressed by the user. JavaScript recognizes up to three standard buttons as follows:

    • 0: Left mouse button (Internet Explorer 8 and earlier return a value of 1 for this button; newer versions of Internet Explorer return 0 as expected)

    • 1: Middle mouse button (Internet Explorer 8 and earlier return a value of 4 for this button; newer versions of Internet Explorer return 1 as expected)

    • 2: Right mouse button

    When working with a left-handed mouse, the parameter values are reversed, which means that the left button now returns a value of 2, and the right button now returns a value of 0. You would need to provide some sort of configuration screen and store user values as part of a cookie in order to support a left-handed mouse because the mouse doesn’t provide identification that JavaScript can capture.

  • clientX: Provides the horizontal pixel value of the mouse pointer, relative to the current window, when an event was triggered.

  • clientY: Provides the vertical pixel value of the mouse pointer, relative to the current window, when an event was triggered.

  • ctrlKey: Returns true when the user pressed the Ctrl key at the time the event was triggered.

  • keyIdentifier: Provides a numeric identifier of the key the user pressed.

  • keyLocation: Provides a numeric identifier of the physical location of the key that the user pressed on the keyboard. This information may seem useless at first. However, you can use this information to perform tasks such as detecting whether the right or left Alt key is pressed.

  • metaKey: Returns true when the user pressed the meta key when the event was triggered.

    The meta key is browser- and platform-specific. When working with the Macintosh, the meta key is commonly the Mac (Command) key with either Firefox or Safari. A few people have reported that pressing the diamond key on MIT keyboards also triggers the meta key. Check here to find out more about the meta key for Linux systems.

    Apparently, pressing the Windows key on a Windows system doesn’t trigger this property with any browser. The recommendation is to avoid using this particular property because it works randomly or not at all.

  • relatedTarget: Specifies whether there’s an element related to the element that triggered the event. For example, when working with a mouseover event, this property contains the identifier of the element that the mouse just exited. Normally, this property contains null to indicate that there’s no related target.

  • screenX: Provides the horizontal pixel value of the mouse pointer, relative to the screen as a whole, when an event was triggered.

  • screenY: Provides the vertical pixel value of the mouse pointer, relative to the screen as a whole, when an event was triggered.

  • shiftKey: Returns true when the user pressed the Shift key when the event was triggered.

Not every browser supports every JavaScript feature. Some browsers don’t support the mouse and keyboard event objects. It’s essential that you test your application on the platforms your clients will use with the browsers that you anticipate the client using.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.