2015-03-12--Brief analysis of DOM2 level events

DOM2 level Events

Several types of events:
object events, mouse events, keyboard events, form events, W3cdom events, and browser-specific events.

Object events:
The Window object, which is also a JavaScript object.
Load applies to the Window object, and all image files required by the page are loaded for completion before triggering.
The Unload applies to the Window object, capturing the last instant of information before the page is closed.
Error applies to Window objects and image objects. Once the image is set to the SRC attribute, it starts loading the image.
Abort is triggered when the image fails to load because the browser stops loading the page before the image is fully loaded. Typically occurs when you click the Browser Stop button.
Resize
Scroll applies to elements that have overflow:auto;

Mouse Move Event
MouseMove is triggered by the object under the mouse, which is triggered when the mouse is pressed.
Moverover
Mouseout

Mouse click events
MouseDown does not necessarily appear in pairs with MouseUp, depending on the number of elements under the mouse when triggered.
MouseUp does not necessarily appear in pairs with MouseDown, depending on the number of elements under the mouse when triggered.
Click the mouse must remain motionless
Dbclick

Keyboard events
Applies to document objects only
KeyDown
KeyUp
The keypress is triggered after the KeyUp, indicating that a key has been pressed.

Form Events
Submit
Reset
Blur applies to form elements such as <label><input><select><textarea><button>.
Focus applies to form elements such as <label><input><select><textarea><button>.
The change applies to <input><select><textarea&gt, which is triggered when the user modifies the value of an element between the focus and Blur events after the focus event occurs.

DOM Events
Three user interface events:
Domfocusin is suitable for any element, not just form elements.
Domfocusout is suitable for any element, not just form elements.
Domactive mouse or button activation.
Seven Change (Mutation) events, triggered when modifying the DOM structure.
The domsubtreemodified is triggered on the lowest common node.
domnodeinserted
Domnoderemoved
Domnoderemovedfromdocument
Nodeinsertedintodocument
Domattrmodified
Domcharacterdatamodified

Event Flow
The delivery of an event stream depends on the document structure, regardless of the visual location. It is not possible to click an element with no nested relationships on the two DOM structure at the same time.
IE Event Bubbling
Netscape Event Capture
The default event bubbling

Block bubbling:
E.stoppropagation ();
IE e.cancelbubble = true;

To cancel the default action:
Note: Some events cannot be canceled, such as: Mousemove,load,unload,select,change ...
E.preventdefault ();
IE E.returnvalue = false;

The traditional event model
The most technical flaw: an event listener can only be a single function and cannot specify the capture or bubbling phase.
Example of removing a listener: Anchor.onclick = null;
Example of a manual trigger event: Anchor.onclick ();

The event model of MSIE
Attachevent (' on ' + type, callback);
DetachEvent (' on ' + type, callback);
You can specify multiple listeners for an event, but only the bubbling phase fires.
Example of a manual trigger event: Node.fireevent ("on" + type);
About the This keyword in the listener:
Unlike the traditional model, the MSIE model is simply a reference rather than a copy event listener, so this reference will be the original function (typically in the Window object), not the object that is attached to the registered event listener.

DOM2 Event Model
AddEventListener
Removeeventlistenr
Specifying multiple listeners for an event does not guarantee the order of execution, and to guarantee the order of execution, you can register only one listener and then invoke multiple functions within it in the desired order.
Manual triggering events require a combination of document.createevent () and dispatchevent () to trigger manually.
Example:
var event = document.createevent (' mouseevents ');
Event.initmouseevent (' Click ', True, true, window, 0,.....);
Node.dispathevent (event);

Alternative to the Load event P160
1. If the browser exists with the AddEventListener () method, the Domcontentloader event is used.
2, for Safari, use SetInterval () regular check document.readystate = = = ' loaded or complete '.
3, for IE, write a script tag, add the Defer property, use the onReadyStateChange property of the Script object, do readystate = = = ' complete ' check.

About event Listeners
Custom parameters can no longer be specified in the listener. (correct or not, depending on browser)
In the model, the event listener obtains a parameter that represents the event itself.
In the MSIE model, the event listener does not get any parameters.

Event Object Inheritance

Event object in the DOM2 events specification
The event object contains methods and properties for controlling the event flow and the target object.
Event Object Properties:
Bubbles indicates whether the event is a bubbling stage event.
Cancelable Indicates whether the event has a default action that can be canceled.
Currenttarget represents the DOM element in the event stream where the event listener is currently being processed.
Target Object
Timestamp is used to determine the number of milliseconds elapsed since the epoch time of the creation event.
The type contains the event name. such as Click
Eventphase which stage of the event stream the current event listener is in. An integer of 1-3 means that you can also use the event constant capturing_phase,at_target,bubbling_phase representation.
Event Object Method:
Document.createevent (' Event ');
Initevent (EventType, canbubble, cancelable);
Preventdefault ();
Stoppropagation ();

MouseEvent objects in the DOM2 event specification
For mouse events, the event objects that are passed to the event listener are mouseevent objects.
MouseEvent Object Properties:
Altkey whether the ALT key is pressed when the mouse event occurs.
Ctrlkey whether the CTRL key is pressed when the mouse event occurs.
Shiftkey The SHIFT key is pressed when the mouse event occurs.
button which mouse key is pressed by an integer value, left and right (0,1,2). MOUSEEVENT constant, Mouseevent.button_left ...
ClientX relative to the browser window
ClientY
ScreenX relative to the desktop screen
ScreenY
The Relatedtarget MouseEvent object is owned, and the property value is generally null. In the MouseOver event, however, the reference mouse leaves the previous object. In the Mouseout event, the object that was entered before the mouse was referenced.

Browser compatibility issues

Target element of the access event (target)
In IE, the target and Currenttarget properties are not provided, but a srcelement property is provided.
In Safari, a text node becomes the target object instead of the element that contains it. Judging condition: node.nodetype = = = 3

Make sure that the mouse button is clicked (Button)
MSIE
0 No Button press
1 left button
2 Right-click
3 Press the left and right key at the same time
4 Middle Key
5 Press the left middle button at the same time
6 Press the right middle button at the same time
7 Press the left and right button at the same time

Working with the position of the mouse in the document
Safari Pagey
Document.documentElement.scrollTop + E.clienty
IE Document.body.scrollTop + e.clienty

Access keyboard commands
Event.keycode Enter 13 left upper right lower (37,38,39,40) shift CTRL 17
Converts Unicode values to ordinary characters: String.formcharcode (Event.keycode);

2015-03-12--Brief analysis of DOM2 level events