Event: bubbling, prohibition and processing
Click on a button to move the mouse pointer to a part of the web page, select some text on the page - these actions will stimulate events. A DHML web maker can write code to run when responding to these events, which is often referred to as an event handle because it is actually handling 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, whether it is a web page HTML element as an event source, it has been greatly expanded in the type of events thrown by these event sources. Previously, only some of the HTML elements, like anchors, pictures hotspots, form elements, Application objects, and Object objects, etc., can trigger events. In the IE4.0 event model, each HTML element on the page can trigger all mouse and keyboard events.
The following list is listed in IE4.0 (and after a higher version - translator note), any HTML element can be excited:
Mouse event? User behavior of the incident:? OnMouseOver? Moves? The? Mouse? Pointer? OVER? (That? IS,? Entss)? Element.? Onmouseout? Moves? The? Mouse? Pointer? OFF? (That ? Is,? EXITS? ONMOUSEDOWN? Press any of the mouse. • ONMOUSEUP? Release any one of the mouse. • ONMOUSEMOVE? Move the mouse pointer in the interior of the elements. • OnClick? Click left mouse on the element. • OnDBLClick? Double-click the left mouse button on the element. ? Keyboard event? User behavior of the incident:? Onkeypress? Press and release a key (the whole press-bounce process). Note that if a construction is continuous, multiple onkeypress? The event will be continuously excited . ? onkeyDown? Press the button that will only be swim once, even if the button is continuously pressed. ? onkeyup? Release button?
To help web makers create code more compact, simpler and easier to maintain, IE4.o will bubbber event as a new method for processing events. Microsoft? Windows?,? OS / 2, • OSF? Motif,? And almost all other graphical user interface platforms are handled using this technique in their user interfaces. But for HTML, event bubbling is a new way, which provides a valid model of synthesizing event handles on a web document.
In the past, if an HTML element was excited, on this element, the corresponding event handle did not register, this event will disappear, no longer feels. The event bubbling mechanism transmits this unprocessed event to the parent element of the element. As a result, this event continues to take up in the hierarchy of the element (like bubbles, until it is processed, or reaches the top layer of the object model, Document object.
?
The effectiveness of event bubbling is the following:
L ??????????? Allows common actions on multiple elements to be unified.
l ?????????? Decrease the number of code on the web page.
l ?????????? When reducing the update document, the number of code to change.
?
Below is an exemplary example of an event bubbling:
(Example of hyperlink;
http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/Dom_01.htm?)
THIS? IS? SOME? TEXT
In this page, when the user moves the mouse pointer on the text area, a dialog box with "Outerdiv" is popped up. If the user moves the mouse pointer on the picture, the "InnerIMG" word will be displayed. pop up. Note that the ONMOUSEOVER event of the IMG object is to be processed in the case where the event handle is not registered on an object. Why can you do this? Because the ONMouseover event bubbles to its parent element, the DIV object. Since the event handle is registered for the ONMOUSEOVER event on the DIV object, it triggers event processing and generates the dialog box mentioned above.
Every time an event is excited, a special property of the Window object will be created. This special attribute includes an event object (Event object). This event object contains context information of events just excited, such as mouse locations, keyboard status, and source elements of the most important event.
??????? The source element is an element of this event, which can be accessed through the srcelement property of the Window.event object.
In the above example, the dialog displays the ID attribute of the source element of this event.
?
Handling mouse effect: webpage maker can make an interactive reaction by making a mouse effect to move the mouse pointer to the above. The process of creating a mouse effect in IE4.0 is very simple.
(Example Super Link:
http://msdn.microsoft.com/workshop/sample/author/dhtml/overview/Dom_02.htm?)
.Item? {??? cursor:? Hand; ??? font-family:? Verdana; ???? font-size:? 20; ??? font-style:? Normal; ??? Background-color: BLUE; ??? color:? white?}. Highlight? {????? font-family:? verdana; ??? font-size:? 20; ??? font- STYLE:? Italic; ??? background-color:? white; ??? color:? blue?}
Milk
Cookies
Eggs
Ham
Cheese
Pasta
Chicken
?
