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 excitation events:
OnMouseover
Moves The Mouse Pointer Over (That IS, Enters) an Element.
OnMouseout
Moves The Mouse Pointer OFF (That IS, EXITS) AN ELEMENT.
OnMouseDown
Press any of the mouse.
OnMouseup
Release any one of the mouse.
OnMousemove
Mouse pointer in the interior of the element.
Onclick
Click the left mouse button on the element.
Ondblclick
Double-click the left mouse button on the element.
Keyboard event
User behavior of excitation events:
OnkeyPress
Press and release a key (the whole press-bounce process). Note that if a construction is continuously pressed, multiple ONKEYPRESS events will be continuously excited.
OnkeyDown
Press the button that is only excited 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 use this technology to handle events in their user interface. 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 Reduce the number of code on the web page.
l The number of code to change when reducing the update document.
Below is an exemplary example of an event bubbling:
(Example of hyperlink;
Http://msdn.microsoft.com/workshop/sample/author/dhtml/overview/Dom_01.htm)
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 effects:
The web producer 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)
