Dhtml|model|object| Objects |dhtml Events: Bubbling, banning, and handling
Click a button, move the mouse pointer to a part of the page, select some text on the page-these actions will fire the event. A DHML Web page producer can write code to run in response to these events, and this particular code is often called an event handle because it does handle the event.
Event handling is not limited to IE4.0 and IE3.0, Netscape Navigator 3.x and Communicator support event handling. However, in IE4.0, both the Web page HTML elements that are the source of the event, or the kinds of events that are raised by these event sources, have been greatly expanded. Previously, only a few HTML elements, like anchor points, picture hotspots, form elements, application objects, and object objects, could raise events. In the IE4.0 event model, every HTML element on a page can raise all mouse and keyboard events.
The following list lists common events that can be fired by any HTML element in IE4.0 (and later versions of the translator):
Mouse events
User behavior that fires the event:
onmouseover
Moves the mouse pointer over (which, enters) an element.
onmouseout
Moves the mouse pointer off (which, exits) an element.
OnMouseDown
Press any one of the mouse.
OnMouseUp
Releases any key to the mouse.
OnMouseMove
Move the mouse pointer inside the element.
OnClick
Click the left mouse button on the element.
OnDblClick
Double-click the left mouse button on the element.
Keyboard events
User behavior that fires the event:
onkeypress
Press and release a key (the whole press-and-bounce process). Note that if a build is continuously pressed, multiple onkeypress events will be fired continuously.
OnKeyDown
Press the key, the event is only fired once, even if the key is pressed continuously.
OnKeyUp
Release key
To help web makers create code that is more compact, simpler, and easier to maintain, IE4.O event bubbling as a new way to handle events. Microsoft Windows®, OS/2, OSF Motif, and almost all other graphical user interface platforms Use this technology to handle events in their user interfaces. But for HTML, event bubbling is a new method that provides a valid model for synthesizing event handles on Web documents.
In the past, if an HTML element was excited by an event, but on this element, the corresponding event handle was not registered, and the event disappeared and was no longer felt to exist. The event bubbling mechanism then passes the unhandled event further up to the element's parent element. As a result, the event continues to go up in the hierarchy of the element (like bubbles upward) until it is processed, or it reaches the top level of the object model, the Document object.
The effectiveness of event bubbling lies in the following points:
L allow common actions on multiple elements to be treated uniformly.
• Reduce the number of code on the Web page.
• Reduce the number of code that will be changed when the document is updated.
Here is a simple example of event bubbling:
(Examples of hyperlinks;
http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_01.htm)
<HTML>
<BODY>
<div id=outerdiv style= "background-color:red" onmouseover= "alert (window.event.srcElement.id);" >
This is some text
</DIV>
</BODY>
</HTML>
In this page, when the user moves the mouse pointer over the text area, a dialog box with the word "outerdiv" will pop up, and a dialog box with "Innerimg" will pop up if the user moves the mouse pointer over the picture.
Note that the onmouseover event for an IMG object is handled when the event handle is not registered on the object. Why is this possible? Because the onmouseover event bubbles up to its parent element, the Div object. Because the event handle is registered for the onmouseover event on a Div object, it raises event handling and produces the dialog box mentioned above.
Each time an event is fired, a special property of the Window object is created. This particular property includes the event object (the Events object). This event object contains contextual information about the event that was just fired, such as the mouse position, the keyboard state, and the most important source element of the event.
The source element is the element that starts this event, which can be accessed through the Window.event object's Srcelement property.
In the example above, the dialog box shows the id attribute of the source element that fired the event.
To handle mouse effects:
Web page makers can interact with the user by making a mouse effect to make a part of the page move the mouse pointer over it. The process of creating a mouse effect in IE4.0 is very simple.
(Examples of hyperlinks:
http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_02.htm)
<HTML>
<HEAD>
<STYLE>
. Item {
Cursor:hand;
Font-family:verdana;
font-size:20;
Font-style:normal;
Background-color:blue;
Color:white
}
. Highlight {
Cursor:hand;
Font-family:verdana;
font-size:20;
Font-style:italic;
Background-color:white;
Color:blue
}
</STYLE>
</HEAD>
<BODY>
<span class=item>milk</span>
<span class=item>cookies</span>
<span class=item>eggs</span>
<span class=item>ham</span>
<span class=item>cheese</span>
<span class=item>pasta</span>
<span class=item>chicken</span>
<SCRIPT>
function Rollon () {
if (Window.event.srcElement.className = = "Item") {
Window.event.srcElement.className = "Highlight";
}
}
[1] [2] Next page
