/*
This function is called by the mousedown event handler
It registers temporary capture event handlers for subsequent mousemove and mouseup events
and uses these event handlers to drag the specified Document element
The second parameter must be the event object of the mousedown event
*/
function beginDrag(elementToDrag,event)
{
//Where the element is currently located
/ /The style properties of this element must have left and top CSS attributes
//In addition, we assume that they are in pixels
//var x=parseInt(elementToDrag.style.left);
// var y=parseInt(elementToDrag.style.top);
//Calculate the distance between a point and the mouse click. The nested moveHandler function below requires these values
var deltaX=event.clientX -parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// Handlers for mousemove and mouseup events that occur after registering the mousedown event
// Note that they are registered as capture event handlers for the document
// These event handlers remain active while the mouse button remains pressed
// When the button is released when they are deleted
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//We have already handled the event, don’t Let other elements see it
event.cancelBubble=true;
event.returnValue=false;
/*
This is the handler that captures the mousemove event when the element is dragged , which responds to the moving element
*/
function moveHandler(e)
{
//Move the element to the current mouse position
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX) "px";
elementToDrag.style.top=(event.clientY-deltaY) "px";
//Don’t let anything else The element sees this event
event.cancelBubble=true;
}
/*
This event will capture the mouseup event that occurs when the drag ends
*/
function upHandler(e)
{
//Unregister event handler
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true;
}
Call its HTML file code:
Untitled Page
Drag me
This is a test.Testing,testing
3. Advanced event processing in DOM
The event processing in IE 6 is not the W3C DOM standard event processing model, so if the above code is run in the Mozilla Firefox browser, it will lose its effect. The upcoming IE 7 will also support the W3C DOM secondary standard, so it is very important to master the advanced event processing of DOM, because the W3C DOM secondary standard is the future development direction of the Web, and the W3C DOM API is very commonly used. Provides a good foundation for more complex web development in the future.
(1) Scope of event handlers and event propagation
Before formally discussing DOM advanced event processing, we need to understand the scope of event handlers. The scope of an event handler is much more complex than an ordinary function scope. Ordinary function scope chains are relatively easy. For example, if you want to find a variable a in an ordinary function, the JavaScript interpreter will first check whether there is a variable a in the calling object of the function. If not, it will be found in the scope chain. The next object is usually searched in the global object. But event handlers are not that simple, especially when defined with HTML attributes. The head of their scope chain is the object that calls them, and the next object is not the global object, but the object that triggers the event handler. This will cause a problem. Both window and document have a method open(). If open() is not modified before, then the document.open() method will be called in the event processing function instead of the commonly used window. open() method, so when using it, it should be clearly specified as window.open().
(2) Event propagation and registered event handler
1. Event propagation
In the secondary DOM standard, the event handler is more complicated. When an event occurs, the event handler of the target node will is triggered to execute, but the parent node of the target node also has the opportunity to handle this event. The propagation of events is divided into three stages. The first is the capture stage. The event is propagated from the Document object down the DOM tree to the target node. If any parent node of the target has registered a handler for capturing the event, the event will be propagated during the propagation process. This program will be run first. The next stage occurs on the target node itself, and the corresponding event handler registered on the target node will be executed; the last stage is the bubbling stage, where the event will be uploaded back to the parent node from the target node. Similarly, if the parent node has The corresponding event handler will also handle it. In IE, there is no capturing phase, but there is a bubbling phase. You can use the stopPropagating() method to stop event propagation, that is, to make other elements invisible to this event. In IE 6, set cancelBubble to true.
2. Register event handler
Like IE, the DOM standard also has its own event handler, but the event handler of the DOM secondary standard is more powerful than IE. The event handler is registered using the addEventListner method. The method has three parameters. The first is the event type, the second is the processing function, and the third is a Boolean value. true means that the specified event handler will be used to capture the event during the event propagation stage, otherwise it will not be captured. , the function that executes this event processing is triggered when an event occurs on the object, or when it occurs on a byte point of the object and bubbles up to the object, the function that executes this event processing is triggered. For example: document.addEventListener("mousemove", moveHandler, true); is to call the moveHandler function when the mousemove event occurs and can capture the event.
You can use addEventListener to register multiple event handlers for an event, but the execution order of these functions is uncertain and is not executed in the order of registration like C#.
When registering an event handler with addEventListener in Mozilla Firefox, the this keyword represents the document element that calls the event handler. However, this is not necessarily the case in other browsers because this is not a DOM standard. The correct approach is Use the currentTarget property to reference the document element that called the event handler.
3. Event in the secondary DOM standard
Unlike IE, the Event object in the W3C DOM is not an attribute under the window global object. In other words, event is not a global variable. Usually in the DOM secondary standard, event is used as an attribute of the document object where the event occurs. Event contains two sub-interfaces, namely UIEvent and MutationEvent. These two sub-interfaces implement all methods and properties of Event. The MouseEvent interface is a sub-interface of UIEvent, so it implements all methods and properties of UIEvent and Event. Next, let's take a look at the main properties and methods of Event, UIEvent and MouseEvent.
1.Event
Type: Event type, similar to IE, but without the "on" prefix, for example, the click event is just "click".
Target: The node where the event occurs.
CurrentTarget: The node where the event currently being processed occurs, may be the node pointed to by the Target attribute, or may point to the parent node of the node pointed to by Target due to capture or bubbling.
EventPhase: Specifies the stage of event propagation. is a number.
timeStamp: The time when the event occurred.
Bubbles: Indicate whether the event is bubbled.
Cancelable: Indicate whether the event can use the preventDefault() method to cancel the default action.
preventDefault() method: Cancel the default action of the event;
stopPropagation() method: Stop event propagation.
2.UIEvent
View: The window object where the event occurred.
Detail: Provide additional information about the event. For click events, mousedown and mouseup events, they all represent the number of clicks.
3.MouseEvent
Button: A number indicating the state of the mouse button in mousedown, mouseup and click events. It is similar to the button attribute in IE, but the meaning of the number is different. 0 represents the left button. , 1 represents the middle button, 2 represents the right button.
altKey, ctrlKey, shiftKey, metaKey: the same as IE, but IE does not have the last one.
ClientX, clientY: have the same meaning as IE, but in the DOM standard, these two attribute values do not consider the scrolling situation of the document. That is to say, no matter where the document is scrolled, as long as the event occurs in the upper left corner of the window, clientX and clientY are both 0, so in IE, if you want to get the coordinates of the event relative to the beginning of the document, you need to add document.body.scrollLeft and document.body.scrollTop.
ScreenX, 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 properties are very important.
RelatedTarget: Similar to fromElement and toElement in IE, except for mouseover and mouseout, other events have no meaning.
(3) Examples of dragging DOM elements compatible with two mainstream browsers
Okay, I just talked about so many DOM programming and events in IE, so how to write a browser that is compatible with both IE and Mozilla Firefox? What about browser drag and drop programs? 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 IE event object, then use window.event
//Global attributes, otherwise use the DOM secondary standard Event object.
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;
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
