Advanced event processing in Dom

The event processing in IE 6 is not the W3C Dom standard event processing model.CodeRunning in the Mozilla Firefox browser will be ineffective, and the IE 7 to be released will also support the Level 2 standard of W3C Dom, therefore, it is very important to master Dom Advanced event processing, because the W3C Dom Level 2 standard is the future direction of web development. At the same time, W3C Dom APIs are very common, it provides a good foundation for more complex web development in the future.

(1) event handlingProgramScope and event Propagation

Before formally discussing Dom Advanced event processing, we need to understand the scope of the event processing program. The scope of an event handler is much more complex than that of a common function. The scope chain of a common function is relatively easy. For example, to find a variable a in a common function, the javascript interpreter first

Check whether the variable A exists in the call object. If not, it will be located in the next object of the scope chain, generally in the global object. However, event handlers are not that simple, especially those defined by HTML attributes. the header of their scope chain is the object that calls them, And the next object is not a global object, it is the object that triggers the event handler. In this case, a problem occurs. Both window and document have a method open (). If open () is not modified before it, the document will be called in the event processing function. open () method, rather than common window. open () method, so it should be explicitly specified as window. open ().

(2) event propagation and registration of event handling procedures

1. Event Propagation

In the level-2 Dom standard, the event processing program is complicated. when an event occurs, the event processing program of the target node will be triggered for execution, however, the parent node of the target node also has the opportunity to handle this event. Event propagation is divided into three phases. The first is the capture phase. Events are propagated from the document object down the DOM tree to the target node, if any parent node of the target registers the event capture handler, the event will first run during the propagation process. The next stage occurs on the target node itself. The corresponding event handler registered on the target node will be executed. The final stage is the bubble stage, the event is returned from the target node to the parent node. Similarly, if the parent node has an event handler, the event will be processed. In IE, there is no capture stage, but there is a bubble stage. You can use the stoppropagating () method to stop event propagation, that is, make other elements invisible to this event. In IE 6, set cancelbubble to true.

2. register the event handler

Like IE, Dom standards also have their own event handlers. However, Dom Level 2 standard event handlers are more powerful than IE. The addeventlistner method is used for Event Handler Registration, this method has three parameters: the first is the event type, the second is the processing function, and the third is a Boolean value, true indicates that the specified event handler will be used to capture events in the event propagation phase. Otherwise, the event will not be captured. when an event occurs on an object, the function that executes the event processing will be triggered, or when it occurs on the object's byte point and bubbles up to this object, it triggers the function that executes the event processing. For example, document. addeventlistener ("mousemove", movehandler, true) is used to call the movehandler function and capture events when the mousemove event occurs.
You can use addeventlistener to register multiple event processing programs for an event. However, the execution sequence of these functions is uncertain and does not follow the registration sequence as C # does.
When using addeventlistener to register an event handler in Mozilla Firefox, this keyword indicates that the document elements of the event handler are called, but this is not necessarily true for other browsers, because this is not a DOM standard, the correct method is to use the currenttarget attribute to reference the document elements that call the event handler.

3. Event in Level 2 Dom Standard

Unlike ie, the event object in W3C Dom is not an attribute under the window global object. In other words, event is not a global variable. Generally, in the DOM Level 2 standard, event is the attribute of the Document Object where an event occurs. The event contains two sub-interfaces: uievent and mutationevent. These sub-interfaces implement all the methods and attributes of the event, and the mouseevent interface is a sub-interface of the uievent, therefore, all methods and attributes of uievent and event are implemented. Next, let's take a look at the main attributes and methods of event, uievent, and mouseevent.

1. Event

Type: event type, similar to IE, but with no "on" prefix. For example, if you click an event, it is only "click ".

Target: the node where the event occurs.

Currenttarget: the node where an event is being processed. It may be the node pointed to by the target attribute, or it may point to the parent node of the target node due to capture or blister.

Eventphase: Specifies the stage of event propagation. Is a number.

Timestamp: the time when the event occurred.

Bubbles: indicates whether the event is blister.

Cancelable: Specifies whether the event can use the preventdefault () method to cancel the default action.

Preventdefault () method: cancels the default action of an event;

Stoppropagation () method: Stop event propagation.

2. uievent

View: Window object in which an event occurs.

Detail: provides additional information about events. Click events, mousedown events, and mouseup events indicate the number of clicks.

3. mouseevent

Button: A number indicating the status of the mouse key in the mousedown, mouseup, and click events. It is similar to the button attribute in IE, but the number indicates a different meaning, and 0 indicates the left button, 1 indicates the intermediate key, and 2 indicates the right-click Key.

Altkey, ctrlkey, shiftkey, and metakey: The same as IE, but IE does not have the last one.

Clientx and clienty: they have the same meaning as IE, but in the DOM standard, the two attribute values do not consider the scrolling of the document, that is, no matter where the document is rolled, as long as the event occurs in the upper left corner of the window

Clientx and clienty are both 0. Therefore, in IE, add document. Body. scrollleft and document. Body. scrolltop to get the coordinates of the event relative to the start of the document.

Screenx and screeny: the position of the mouse pointer relative to the upper left corner of the monitor. If you want to open a new window, these two attributes are very important.

Relatedtarget: similar to fromelement and toelement in IE, except for Mouseover

Mouseout makes sense. Other events do not make sense.

(3) Examples of dragging DOM elements compatible with two mainstream browsers

Well, I have talked about so many Dom programming and Internet Explorer events. How can I write drag-and-drop programs compatible with mainstream browsers IE and Mozilla Firefox? The Code is as follows:

Function begindrag (elementtodrag, event)
{
VaR deltax = event. clientx-parseint (elementtodrag. style. Left );
VaR deltay = event. clienty-parseint (elementtodrag. style. Top );

If (document. addeventlistener)
{
Document. addeventlistener ("mousemove", movehandler, true );
Document. addeventlistener ("mouseup", uphandler, true );
}
Else if (document. attachevent)
{
Document. attachevent ("onmousemove", movehandler );
Document. attachevent ("onmouseup", uphandler );

}

If (event. stoppropagation) event. stoppropagation ();
Else event. cancelbubble = true;
If (event. preventdefault) event. preventdefault ();
Else event. returnvalue = false;

Function movehandler (E)
{
If (! E) E = Window. event; // if it is an event object of IE, use window. Event
// Global attribute. Otherwise, the DOM second-level standard event object is used.
Elementtodrag. style. Left = (event. clientx-deltax) + "PX ";
Elementtodrag. style. Top = (event. clienty-deltay) + "PX ";

If (event. stoppropagation) event. stoppropagation ();
Else event. cancelbubble = true;

}

Function uphandler (
E)
{
If (document. removeeventlistener)
{
Document. removeeventlistener ("mouseup", uphandler, true );
Document. removeeventlistener ("mousemove", movehandler, true );}
Else
{
Document. detachevent ("onmouseup", uphandler );
Document. detachevent ("onmousemove", movehandler );}
}
If (event. stoppropagation) event. stoppropagation ();
Else event. cancelbubble = true;

}