DHTML Object Model (2)

Events: Bubble, prohibition, and handling
Click a button to move the pointer to a part of the page and select some text on the page. These actions will trigger the event. A dhml web page producer can write code to run in response to these events. This specific code is usually called an event handle because it is indeed processing events.

Event processing is not limited to ie4.0 and ie3.0 ,? Netscape? Navigator? 3. X? And communicator support event processing. However, in ie4.0, both web page HTML elements as the event source and the types of events triggered by these event sources have been greatly expanded. In the past, there were only a few HTML elements, such as anchor points, image hotspots, form elements, application objects, and object objects, which can trigger events. In the ie4.0 event model, every HTML element on the page can trigger all mouse and keyboard events.

The following list lists common events that can be triggered by any HTML element in ie4.0 (later version-Translator's note:

Mouse events
? Stimulate user behavior of the event:
?
Onmouseover
? Moves? The? Mouse? Pointer? Over? (That? Is ,? Enters )? An? Element.
?
Onmouseout
? Moves? The? Mouse? Pointer? Off? (That? Is ,? Exits )? An? Element.
?
Onmousedown
? Click any part of the mouse.
?
Onmouseup
? Release any mouse button.
?
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
? Stimulate user behavior of the event:
?
Onkeypress
? Press and release a key (the entire press-up process). Note that if one build is continuously pressed, multiple onkeypress? Events are continuously triggered.
?
Onkeydown
? Press the key and the event will only be triggered once, even if the key is continuously pressed.
?
Onkeyup
? Release button
?

To help web page makers create code more compact, simpler, and easier to maintain, ie4.o uses event bubbling as a new method to process events. Microsoft? Windows ?,? OS/2 ,? OSF? Motif ,? And almost all other graphic user interface platforms use this technology to process events in their user interfaces. But for HTML, event bubbling is a new method, which provides an effective model for merging event handles on Web documents.

In the past, if an HTML element was triggered by an event, but on this element, the event handle is not registered, and the event disappears and no longer feels like it exists. The event bubbling Mechanism further transmits the unprocessed event to the parent element of the element. As a result, this event continues to go up (like a bubble) in the hierarchy of the element until it is processed, or reaches the top layer of the object model, the Document Object.

?

The validity of event bubbling is as follows:

L ??????????? Allows the joint actions on multiple elements to be processed in a unified manner.

L ??????????? Reduce the number of code on the web page.

L ??????????? Reduce the number of codes to be changed when updating documents.

?

The following is a simple example of event bubbling:

(Example hyperlink;

Http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_01.htm ?)

This? Is? Some? Text

When you move the cursor over the text area, a dialog box with the word "outerdiv" is displayed. If you move the cursor over an image, A dialog box with "innerimg" is displayed.

Note that the onmouseover event of an IMG object is handled when the event handle is not registered on the object. Why? Because the onmouseover event bubbles up to its parent element, div object. Because the event handle is registered for the onmouseover event on the DIV object, it triggers event processing and generates the preceding dialog box.

Each time an event is triggered, a special attribute of the window object is created. This special property includes the event object ). The event object contains context information of the newly triggered event, such as the mouse position, keyboard status, and the most important source element of the event.

??????? The source element is the element that starts the event and can be accessed through the srcelement attribute of the window. event object.

In the preceding example, the dialog box displays the ID attribute of the source element that fires the event.

?

Handle the mouse effect:
Web page creators can make a part of the page interact when users move the mouse pointer over it by making the mouse effect. The process of creating a mouse effect in ie4.0 is very simple.

(Example hyperlink:

Http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_02.htm ?)

Milk
Cookies
Eggs
Ham
Cheese
Pasta
Chicken
?

In the preceding example, seven span objects are used as item? The Style Class is set to italic. When the mouse pointer moves over any of the seven elements, its style will be changed to the one specified by the highlight style class.

Internet? Explorer? New features in 4.0 bring the following benefits:

L ????????? Now events can be triggered from the span tag. In the past, web page makers may have to package the content of each span in an anchor, to obtain the corresponding event.

L ????????? Event bubbles can be used in the Document Object (document? Object) is captured at this level. You do not have to register an independent event processing handle for each element involved in this effect. For example, if the Web Builder adds HTML code to the page, these additional elements will automatically participate in this event model without changing even a line of script code. Note that the document object (document? Object) is the "super? Parent) element.