Understanding events in JavaScript is difficult to understand in many languages, but it is also a very important concept. The same is true for event processing in javascript. It is precisely because of event processing that Ajax dragging will occur. This article will discuss the event processing in JavaScript. After reading it, you will know how many Ajax frameworks implement the drag effect.
I. IE Event object
(1) main attributes and methods of the IE Event object
In IE, there is an object Event that is responsible for Event processing. This object is responsible for Event processing and contains many attributes and Methods. Through these methods and attribute calls, you can complete a lot of event processing.
Type: the type of the event, which is a string without the "on" prefix in the HTML Tag attribute. For example, "Click" indicates a Click event.
SrcElement: The Event source, which is the element of the event.
Button: Declares the mouse key pressed, which is an integer. 1 indicates the left mouse button, 2 indicates the right mouse, and 4 indicates the middle mouse key. If Multiple mouse keys are pressed, these values are added together, SO 3 indicates that the left and right keys are pressed simultaneously.
ClientX/clientY: refers to the horizontal and vertical coordinates of the mouse when an event occurs, and return integers. Their values are generated relative to the upper left corner of the inclusive window.
OffsetX/offsetY: the position of the mouse pointer relative to the source element. You can determine which pixel of the Image object to click.
AltKey, ctrlKey, and shiftKey: as the name suggests, these attributes indicate whether Alt, Ctrl, or Shift keys are simultaneously held when a mouse event occurs, and a Boolean value is returned.
KeyCode: return the code of the key and the Unicode characters of the keypress event when the keydown and keyup events occur.
FromElement and toElement refer to the document elements that the mouseover event has moved, and the latter refer to the document elements that the mouse moves to in the mouseout event.
CancelBubble: A boolean attribute. When it is set to true, the Stop event is further blister to the element of the inclusion level.
ReturnValue: A boolean attribute. When it is set to false, a browser can be organized to execute default event actions, which is equivalent.
AttachEvent () and detachEvent () Methods: Methods for registering multiple event handler functions for developing DOM object event types. They have two parameters. The first is the event type, the second is the event processing function. When the attachEvent () event is executed, this keyword points to the window object, rather than the element where the event occurs.
(2) Description of the IE Event object
1. the IE Event object is a global attribute.
In IE, you cannot pass the Event object as a parameter to the event handler. You can only use window. event or Event to reference the Event object. In IE, Event is an attribute of window, that is, event is a global variable, which provides the Event details.
2. event bubbles in IE: Events in IE can bubble up to the upper level a little along the tolerant level. That is to say, the lower DOM node defines the event handler function, if an event handler function of the same event type as that of the lower-layer node is added to the upper-layer node, the upper-layer event handler function is also executed. For example,
The tag contains. If both labels have onclick event processing functions, The onclick event processing function of the tag is executed first.
Event processing functions. If you do not want to execute the upper-Layer
The onclick event processing function of, set cancelBubble to false.
Ii. Example of dragging DOM elements in IE
The Code is as follows:
/*
This function is called by processing the mousedown event.
It registers a temporary event capture handler for subsequent mousemove and mouseup events.
Use 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 attribute of the element must have the left and top CSS attributes.
// In addition, we assume that they use pixels as units.
// Var x = parseInt (elementToDrag. style. left );
// Var y = parseInt (elementToDrag. style. top );
// Calculate the distance between a point and a mouse click. These values are required by the nested moveHandler function below.
Var deltaX = event. clientX-parseInt (elementToDrag. style. left );
Var deltaY = event. clientY-parseInt (elementToDrag. style. top );
// Process the mousemove and mouseup events that occur after the mousedown event is registered
// Note that they are registered as capture event handlers for the document
// When the mouse button is pressed, these Event Handlers remain active.
// When buttons are released, they are deleted.
Document. attachEvent ("onmousemove", moveHandler );
Document. attachEvent ("onmouseup", upHandler );
// We have handled this event and don't let other elements see it.
Event. cancelBubble = true;
Event. returnValue = false;
/*
This is the handler that captures the mousemove event when an element is dragged. It 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 ";
// Do not let other elements see the event
Event. cancelBubble = true;
}
/*
This event captures the mouseup event that occurs when the drag ends.
*/
Function upHandler (e)
{
// Deregister the event handler
Document. detachEvent ("onmouseup", upHandler );
Document. detachEvent ("onmousemove", moveHandler );}
Event. cancelBubble = true;
}
Code for calling its HTML file:
Untitled Page
