From http://blog.csdn.net/wishfly
Magic dom
"
Dom Level 2 One of the modules described in is Events Module, which specifies a method for processing Dom Events in the document. In earlier versions of browsers, the built-in event module uses event processing.ProgramThese handlers are attached to the element as attributes. When needed Dynamically attaches to and deletes from elements This method is inconvenient. In addition, use this module to attach each event handler to a non- Element It is impossible on the node, because only Element It can have attributes. Note: IE There is a similar Dom Level 2 events Interface event model, but does not follow W3C Standard.
1
, Event circulation document Method The term event stream is used to describe the occurrence of an event in Dom The process of traversing the document. Each time has related event targets. This goal is usually a specific node in the document where an event occurs. Describes how the target event listener processes input events:
Input event E The event is listening for the event E Documentation Element triggers the registered event listener.
The event flows in two directions in the Document Tree: up or down. Specifies the event flow direction for the type of event listener registered for a given event. The event listener can specify that it uses event capture by itself. In this case, it will be the event receiver before all its derived events. This is exactly how events can flow down in the document tree. Some types of events can trigger listeners related to their targets, and then move the document tree up to reach each inherited parent target. These types of events are called bubbles. (Bubbling) Event. The event flows in two different directions in the document. Indicates the event listener for each node.
Click Event
Assume that you click a node D, And Node A , B And D Click the event Both have two event listeners. In this case, one event listener uses event capture (down), while the other event listener does not use event capture (up, bubbling ). Node A The capture-based event listener that will receive the first event and trigger it (point in the figure 1 ). Next, the node B The capture-based event listener that will trigger it (point 2 ). Finally, the node D The event listener that will trigger it (point 3 ).
The event will flow backward to the document tree at this point. The trigger event listener for a node (no event capture is used ). D ( Point 4 ), Then B (Point 5 ), And finally go back to the node. A (Point 6 ).
2
,
Eventtarget
Interfaces and
Eventlistener
Interface Dom level2 eventtarget Interface IDL Definition: Interface eventtarget { Void addeventlistener (in domstring type, in eventlistener listener, in Boolean usecapture ); Void removeeventlistener (in domstring type, in eventlistener listener, in Boolean usecapture ); Boolean dispatchevent (in event EVT) raises (eventexception ); }; Addeventlistener () Method Eventlistener An interface is attached to a specific event Target (usually a document node. Type The parameter can specify the event type processed by the listener (see Dom2 events Module specification ). Listener Parameters are specific to the event to be processed Eventlistener Interface. Usecapture The parameter specifies whether the listener uses event capture when an event is being listened. If this is True, The event target of this listener will accept this type of event, and it will register this type of event before any of its own derivative events in the document tree. Dispatchevent () Method allowed Dom Applications manually dispatch events to the event model. These manually assigned events will have the same bubble type and capture behavior as the events normally generated by the implementation. Eventlistener Interface is specified Interface eventlistener { Void handleevent (in event EVT ); }; Handleevent () Method, which can take an event as its unique parameter.
3
Event stage. Dom Events can be in three phases: Event capture Phase, At target PHASE AND Event capture Phase. When an event is being captured Eventlistener When an event is processed by an API , This event is in Event capture Stage. Each of Eventlistener All interfaces process the event before the event Target. If Eventlistener The interface is using event capture ( When it is attached to this target, its Usecapture Set the parameter True ), The event target will be registered. When attached to the real event target Eventlistener When an event is processed by the API At target Stage. If you specify this event Bubbling Event, the event begins to flow backward to the hierarchical structure of the document tree Document Node itself. Note: according Dom Standard: when an event begins to flow, determine the event Target chain from the initial event target to the top of the tree before the event is actually dispatched. If the structure of the document tree is modified when the event is flowing, the event will follow the path of the tree's initial state. Of course, not all types of events flow (for example, focus events ). Can reference some flow events Dom2 events Module specification.
4. event interfaces. Dom Events All events in the Specification Event Interfaces serve as their basic interfaces. Interface event { // Phase type Const unsigned short capturing_phase = 1; Const unsigned short at_target = 2; Const unsigned short bubbling_phase = 3; // Type Attribute can specify the event type (Click and mouse to activate the link, etc) Readonly attribute domstring type; // Target Attribute can specify the event Target of the event-the node to which the event was originally sent. Readonly attribute eventtarget; // Currenttarget Attribute is the event target that is currently processing the event. Readonly attribute eventtarget currenttarget; // Eventphase Attribute can indicate the current stage of the event ( Event capture Phase, At target PHASE AND Event capture Phase) Readonly attribute unsigned short eventphase; Readonly attribute Boolean bubbles; // Cancelable Attribute can indicate whether the event can block its default behavior. If True, You can call Preventdefault () Method. Readonly attribute Boolean cancelable; // Timestamp The attribute specifies the time when an event is created in milliseconds. Readonly attribute domtimestamp timestamp; // Stoppropagation This method can prevent events from spreading to the next event target, which is effective for all events in the event phase. Void stoppropagation (); // Preventeefault Method will block Dom Implement any default action related to this event type. Void preventeefault (); // If an application creates its own events, it can use this method to initialize them. Void initevent (in domstring eventtypearg, in Boolean canbubblearg, in Boolean cancelablearg ); };
5
,
Dom
How the application processes events
The following example uses Pre-dom And attribute-based event handlers to handle events: <HTML> <Head> </Head> <Body> <A href = "#" onmouseover = "This. style. fontweight = 'bold '" onmouseout = "This. style. fontweight = 'normal'"> link one </a> <A href = "#" onmouseover = "This. style. fontweight = 'bold '" onmouseout = "This. style. fontweight = 'normal'"> link two </a> </Body> </Html> When you move the mouse to activate the link in this document, the link becomes bold. To use Dom 2 The event listener completes the same thing,CodeAs follows: (ie is not supported. Use a supported browser, as shown in figure Firefox ) <HTML> <Head> </Head> <Body> <A href = "#" id = "link1"> link one </a> <A href = "#" id = "link2"> link two </a> <Script language = "JavaScript"> <! -- Function makebold (EVT) { EVT. currenttarget. style. fontweight = "bold "; } Function makenormal (EVT) { EVT. currenttarget. style. fontweight = "normal "; } Document. getelementbyid ("link1"). addeventlistener ("Mouseover", makebold, false ); Document. getelementbyid ("link1"). addeventlistener ("mouseout", makenormal, false ); Document. getelementbyid ("link2"). addeventlistener ("Mouseover", makebold, false ); Document. getelementbyid ("link2"). addeventlistener ("mouseout", makenormal, false ); // --> </SCRIPT> </Body> </Html> Each event listener function can be attached to more than one target. Handler usage EVT. currenttarget Instead Evt.tar get Why? This is because
Events always take the deepest nested node in the tree as the target . In this case,
The target is a text string.
Link1
And
Link2
Text node However, these are not what you want-you want <A> Mark and modify their styles. The target attribute of the event is set as the initial target of the event. Anchor The marked text node. Mouseover The event is Bubbling Event, so you can wait for it to flow up <A> The event listener, and then use Currenttarget ( In this case <A> Marked Node ) Operate on it. The following program code demonstrates event capture and bubbling usage. <HTML> <Head> </Head> <Body> <Ul id = "list1"> <Li> list item 1 </LI> <Li> list item 2 </LI> <Li> list item 3 </LI> <Ul id = "list2"> <Li> list item 4 </LI> <Li id = "item5"> list item 5 </LI> <Li> list item 6 </LI> <Ul id = "list3"> <Li> list item 7 </LI> <Li id = "item8"> list item 8 </LI> <Li> list item 9 </LI> </Ul> </Ul> </Ul> <Textarea id = "output" name = "textfield" rows = "15" Cols = "75"> </textarea> <A href = "#" onclick = "document. getelementbyid ('output'). value =''; "> clear entries </a> <Script language = "JavaScript"> <! -- Function clicklistener (EVT) { VaR outstr; Outstr = "event Target :"; // Obtain Event Target If(evt.tar get. tagname) // target Outstr+incluevt.tar get. tagname + ";"; Else Outstr + = "(text node );"; Outstr + = "current target :"; // Obtain Current target If (EVT. currenttarget. tagname) // currenttarget { Outstr + = EVT. currenttarget. tagname + "(" + EVT. currenttarget. getattribute ("ID") + ")" + ";"; } Else Outstr + = "(text node );"; // Obtain (Text node) If (EVT. eventphase = 1) // event capture Phase Outstr + = "captrue phase \ n "; Else if (EVT. eventphase = 2) // at Target Phase Outstr + = "at Target Phase \ n "; Else if (EVT. eventphase = 3) // event capture Phase Outstr + = "Bubbling phase \ n "; Document. getelementbyid ("output"). Value + = outstr ;// Set Outstr Add Textarea } Document. getelementbyid ("list1"). addeventlistener ("click", clicklistener, true ); Document. getelementbyid ("list1"). addeventlistener ("click", clicklistener, false ); Document. getelementbyid ("list2"). addeventlistener ("click", clicklistener, true ); Document. getelementbyid ("list2"). addeventlistener ("click", clicklistener, false ); Document. getelementbyid ("list3"). addeventlistener ("click", clicklistener, true ); Document. getelementbyid ("list3"). addeventlistener ("click", clicklistener, false ); Document. getelementbyid ("item5"). addeventlistener ("click", clicklistener, true ); Document. getelementbyid ("item5"). addeventlistener ("click", clicklistener, false ); Document. getelementbyid ("item8"). addeventlistener ("click", clicklistener, true ); Document. getelementbyid ("item8"). addeventlistener ("click", clicklistener, false ); // --> </SCRIPT> </Body> </Html> It is worth noting that there are two pairs for each event Target Addeventlistener Method call. register the event handler and non-capture (bubble event) event handler for event capture. When you click a list item List item5 The first three events will be the capture style event handler for the events on their subnodes, starting at the top of the document: List1 , List 2, Item5 . The following three trigger events are click events when the event flows up the tree: Item5 , List2 , List1 . Because the event is aligned List item5 (Corresponding <Li> The text node of the list item, so there is no target stage displayed here. If you click a small solid circle under the text, the event target will be <Li> Mark itself, and the target stage will be reflected.
Using the capture style event listener to assign the same behavior to the node's subnode groups is a very powerful method. This method allows the subnode to display the same behavior without attaching the event listener to each event.
6. Interoperability Between Event Listeners and legacy listeners In Dom Level 2 events Previously, the rules used attributes about the expected event Target to register the event listener, because all browsers currently allow this method to provide backward compatibility. According Dom Level 2 events Standard, Dom implementation allows you to view the settings of the event handler attributes of an element, which is similar to creating and registering an event listener for this element. Usecapture The default parameter is False . As follows: Someevent. onmouseover = myeventfunction; And Someevent. addeventlistener ("Mouseover", myeventfunction, false ); Is the same. When the event handler attributes are used, there is no way for the event listener (which has been registered through the attribute about the element) to obtain the context information about the event, for example, the current target stage or event stage.
"
