Приглашаем посетить
Ломоносов (lomonosov.niv.ru)

Programming Standard User Events

Programming Standard User Events

Standard user events are the set of events shared by all elements in response to user interactions. These are events for tracking the mouse and the keyboard, focusing elements, and scrolling any scrollable region. Many elements expose events specific to the purpose of the element. For example, form elements have onsubmit and onreset events. These additional events are discussed with their respective elements in Chapter 8, Chapter 9, and Chapter 10.

Mouse Events

The Dynamic HTML object model exposes events for tracking the different states of the mouse, including every time the mouse is moved into and out of elements, as well as when mouse buttons are pressed. The following table lists the mouse events.


Event Description
onmousedown Mouse button was pressed.
onmousemove Mouse was moved or is being moved.
onmouseup Mouse button was released.
onclick Left mouse button was clicked, or the default action of an element was invoked.
ondblclick Left mouse button was double-clicked.
onmouseover Mouse pointer entered the scope of an element.
onmouseout Mouse pointer exited the scope of an element.
ondragstart A drag-and-drop operation was initiated.
onselectstart A new selection was initiated over an element using the mouse.
onselect A selection is occurring.

The onclick and ondblclick Events

The onclick event is more a semantic event than a physical event. While an onclick event usually occurs when the left mouse button is pressed and released, it can also occur as the result of an action that simulates a click. For example, the onclick event fires when the user presses the Enter key while a buttonlike control has the focus. The ondblclick event fires when the user clicks the left mouse button twice within a system-defined amount of time.

When an element is clicked, the onclick event is fired after the onmousedown and onmouseup events fire. The onclick event is not required to fire on the same element the onmousedown and onmouseup events occurred on. Suppose, for example, that you have the following HTML code:

<HTML>
   <HEAD>
      <TITLE>Click Rules</TITLE>
   </HEAD>
   <BODY>
      <H1>Welcome to My Home Page</H1>
      <H2>Providing the Latest Dynamic HTML Information</H2>
   </BODY>
</HTML>

If the mouse button is pressed and released on the H1 element, the onmousedown, onmouseup, and onclick events are all fired on that element. If the mouse button is pressed on the H1 element and released on the H2 element, however, the onmousedown event is fired on the H1 element and the onmouseup event is fired on the H2 element. The onclick event is fired on the body, as is any subsequent ondblclick event that may fire as part of this sequence, because the body is the common element the mouse pointer is on when the mouse button is released. The onmouseup event is fired on the H2 element and not on the H1 element because the mouse is not captured by any textual contents.

HTML elements that accept user input do capture the mouse event. If the mouse button is pressed on a user input element and released on a textual element, the onmousedown event is fired on the user input element, the onmouseup event is fired on the textual element, but no onclick event is fired on any element. The onclick event occurs on a user input element only when the mouse button is pressed and released on the same element.

Because onclick and ondblclick can be fired on the element that is common to the elements on which the mouse button is pressed and released, these two events can initiate on elements that are not leaf nodes in the document's tree. Leaf nodes are the deepest nodes of the document and actually contain the contents. The onclick and ondblclick events are unusual among user events. With a few exceptions introduced in later chapters, all the other mouse and keyboard events always start at a leaf node and bubble upward through the hierarchy.

Here is the event-ordering relationship between the onmouse and onclick events:

  1. onmousedown
  2. onmouseup
  3. onclick

If a double click occurs, the event sequence continues as follows:

  1. onmouseup
  2. ondblclick

The onmouseover and onmouseout Events

The onmouseover and onmouseout events occur when the mouse pointer enters or leaves an element on the page. These mouse events expose the same parameters as the onmousedown and onmouseup events. They fire only once on the leaf nodes of the document and bubble upward, rather than firing on every boundary crossing. For example, suppose you have the following HTML code:

<HTML>
   <HEAD>
      <TITLE>Over and Out Boundaries</TITLE>
   </HEAD>
   <BODY>
      <H1>This is a header.</H1>
      <DIV>
         <P><B>Welcome</B> to my page.</P>
      </DIV>
   </BODY>
</HTML>

In this HTML page, when the mouse moves from the body into the boldface text in the paragraph, a single onmouseout event is fired on the Body element and an onmouseover event is fired on the B element. Because the event bubbles, all elements whose boundaries are crossed receive an event notification.

When the mouse crosses from the boldface text into the nonboldface text in the paragraph, an onmouseout event is fired on the element and bubbles through the paragraph. This is important to note because the paragraph may receive an onmouseout event even while the mouse pointer is still contained within it.

To accurately test whether the mouse was moved off an element, use the element's contains method along with the toElement property of the onmouseout event, which indicates the new element to which the mouse has moved. The contains method indicates whether one element is contained within another element. With some simple code, you can test the destination element to see whether it is contained within the element on which the event fired. If it is, the mouse pointer is still on the firing element. In this example of an onmouseout event handler, the event handler would be attached to the onmouseout event of an element to test whether the mouse pointer is still within it:

<SCRIPT LANGUAGE="JavaScript">
   function testexit(src) {
      // Test whether the mouse really left an element.
      if (!src.contains(event.toElement)) {
         // Mouse exited the element.
      }
   }
</SCRIPT>
<H1 ONMOUSEOUT="testexit(this);">Some <EM>text</EM></H1>

In this example, the this pointer, which represents the element on which the event was fired, must be passed in. The srcElement property of the event object cannot be used instead; it might be a child element. For example, when the mouse moves over the emphasized text in the preceding header, the emphasized text, not the H1 itself, would be the srcElement.

The same method works when the mouse is entering an element—almost identical code works for the onmouseover event. The only change is that the fromElement property needs to be tested using the contains method:

function testenter(src) {
   if (!src.contains(event.fromElement)) {
      // Mouse entered the element.
   }
}

The onmouseover event fires when the mouse pointer is first moved over an element. The event-ordering relationship between the onmouseover, onmousemove, and onmouseout events when the mouse pointer crosses a boundary is as follows:

  1. onmouseout
  2. onmousemove (may occur many times)
  3. onmouseover

The ondragstart Event

Currently, Dynamic HTML offers limited built-in support for implementing drag-and-drop operations. A single drag-related event is exposed in the object model for overriding the default drag behavior of the browser. When the user clicks and holds down the mouse button and drags over certain elements on the document such as images and anchors, those elements take part in a drag-and-drop operation.

There may be times when this behavior will interfere with the author's intentions. To prevent the built-in dragging behavior from being initiated, the ondragstart event is exposed. This event essentially serves the single purpose of allowing the developer to cancel the event by returning a value of false.

There is a close relationship between canceling the onmousemove event and the ondragstart event. To prevent a user from initiating a built-in drag-and-drop operation on an element, cancel the ondragstart event. To author your own drag operation on an element, you usually need to also cancel the onmousemove event.

An example in Chapter 12, "Dynamic Positioning," simulates drag-and-drop behavior by using the onmousemove event to move positioned elements around the screen. This technique works well for providing drag-and-drop support within a page. Dynamic HTML does not yet allow you to program generic drag-and-drop behavior across frames or across windows.

The onselectstart and onselect Events

Dynamic HTML exposes two events for completely tracking the user's selection anywhere in the document: onselectstart and onselect, fired in that order.

Similar to the ondragstart event, an onselectstart event is fired only when a selection is about to be initiated, usually by the user clicking on some contents in a document. The purpose of this event is to allow you to prevent a region of the document from being selected. It is important to recognize that this only prevents the initiation of the selection. For example, in the following document if the user clicks on the text Scott's Page and tries to make a selection, no selection occurs:

<HTML>
   <HEAD>
      <TITLE>onselectstart Example</TITLE>
   </HEAD>
   <BODY>
      <H1>Welcome to 
         <EM STYLE="cursor:hand"
            ONSELECTSTART="event.returnValue=false;">Scott's Page
         </EM>
      </H1>
   </BODY>
</HTML>

However, if the user clicks on the text outside of Scott's Page and drags the mouse across Scott's Page, the text will be selected because only the initiation of the selection can be canceled.

The CSS cursor property is used to change the mouse pointer to a hand icon to signify that the contents can be clicked. By adding an onclick event handler, you can specify a custom action to take place when the user clicks on Scott's Page. The combination of the cursor property and the onselectstart event handler provides the same level of control as is available by default with anchors.

The onselectstart event bubbles up through the document. Therefore, it is possible to catch this event on the document and always return false. Doing so prevents the user from selecting any text in the document. The onselectstart event should be limited to situations in which the built-in text selection might cause problems with the intended user interface of the page.

The onselect event follows the onselectstart event and occurs while the selection is being made. It fires multiple times as the user extends or collapses the selection. The onselect event does not bubble. Instead, it occurs on the section of the document the selection is occurring within: either the document's Body element for textual contents or the input controls.

Keyboard Events

Dynamic HTML provides three events for tracking the user's keystrokes: onkey-down, onkeyup, and onkeypress, fired in that order. The onkeydown and onkeyup events fire whenever any key on the keyboard is pressed and released. The onkeypress event fires after any ANSI key is pressed.

The event object exposes four properties for determining the state of the keyboard when these events occur. The shiftKey, altKey, and ctrlKey properties are the same as those exposed for the mouse events.


Property Value
keyCode The ASCII value of the key pressed. Setting this property to 0 in an onkeypress event handler cancels the event. Setting it to a positive value replaces the key pressed with a different ASCII key.
shiftKey State of the Shift key (true/false).
altKey State of the Alt key (true/false).
ctrlKey State of the Ctrl key (true/false).

Scroll Event

The Body element, as well as many other elements, can have scrollbars. Whenever one of these elements or its scrollbar is scrolled, the onscroll event fires. Scrolling occurs when the user explicitly scrolls the scrollbar or implicitly scrolls the element through another action. For example, clicking on a link to a bookmark fires the onscroll event if the document needs to scroll to bring the element into view. The onscroll event cannot cancel the scrolling because it is fired after the scrolling is complete. This event occurs only on the scrolled element (for example, the Body element) and does not bubble.

Focus Events

Dynamic HTML provides two events related to focus: onfocus and onblur. The onfocus event is fired when an element is activated either by clicking on it or through the keyboard. The element the user has just left receives an onblur event. Only user input elements and the body can receive the focus. Therefore, clicking on HTML contents causes the body to receive the onfocus event, not the actual contents.

The onblur event is also fired whenever another application or window is activated over the current frame or application. Therefore, when you switch windows, the current element fires an onblur event. When you return to the window, the onfocus event is fired on that element.

The timing of these events in relationship to the window has some complexities that are introduced in Chapter 5, "Window and Frame Management."

Help Event

The document exposes an onhelp event that fires whenever the user requests a help file for the document using the Microsoft Windows keyboard shortcut (F1). This event does not fire when the user selects Help from the Help menu. The onhelp event first occurs on the element with the focus and bubbles upward. The default action for this event is to display the built-in help file, but this event can be overridden to display a custom help file.

The onhelp event also fires in modal dialog boxes that support context-sensitive help through a Help icon available on the title bar. By clicking the Help icon, the user can change the cursor to a special help cursor. When the user clicks on an element using this cursor, an onhelp event fires on the element and then bubbles to each parent element.

An event handler for the onhelp event typically displays a custom help file. The handler can call the showHelp method to display a Windows help (HLP) file or the open method to display an HTML file. showHelp and open are both methods of the window object. The showHelp method can also display HTML files, but the open method is supported by more browsers and offers more control over the display window. Chapter 5, "Window and Frame Management," describes the open method.

[Содержание]