The Navigator Event Model: New Mouse Events - Doc JavaScript

New Mouse Events

JavaScript 1.2 introduces several new mouse click events:

• mousedown
• mouseup
• dblclick
• mousemove

A click event still occurs when you press and release the mouse button while the cursor is on a specific object. But the mouseup and mousedown events are more specific than a general click. They reflect separate steps in the "click process." As with the new keyboard events, your scripts can now take one action when the mouse button is pressed atop an object, and another action when the button is released. As you would expect, the dblclick event occurs when you double click an object that supports the event.

Another new mouse-related event is mousemove, which deals with mouse movement rather than mouse clicks. With this event, you can find out when the cursor is moved, and possibly react to specific movements. For example, you could use the onmousemove event handler to let the user drag specific elements from one place to another.

The following example demonstrates the use of the event object's modifiers property. It displays an alert dialog box when you click down the mouse button anywhere in the document with the Ctrl key pressed. Here it is:

<SCRIPT LANGUAGE="JavaScript">
<!--
function processClicks(e) {
  if (e.modifiers & Event.CONTROL_MASK) {
    alert("You clicked down the mouse " +
          "button with the Ctrl key pressed.");
  }
}
if (document.captureEvents)
  document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = processClicks;
// -->
</SCRIPT>

Try it out by pressing the Ctrl key, and clicking down the mouse button anywhere on the page. A dialog box will pop up if you're using Netscape Navigator 4.0x. The script uses the bitwise AND operator to check if the contstant value (Event.CONTROL_MASK) is a component of the modifiers property. Here's a complete list of the supported modifier constants:

• Event.ALT_MASK
• Event.CONTROL_MASK
• Event.SHIFT_MASK
• Event.META_MASK

If you're using Microsoft Internet Explorer 4.0x, be prepared for a JavaScript error when you run this script. We'll address this issue in the following column.

Be sure to read the related columns at the Dynamic HTML Lab for more demonstrations:

• New JavaScript Event Handlers
• Drag & Drop, Part I - Concepts/Navigator 4