A, JavaScript event description
Events
- event, is the document or happened in the browser window to specific interaction instant
- the interaction between JavaScript and HTML are implemented through events,
- for the Web application, a representative of the following events: click event, remove events, the mouse moved to the keyboard press/up event etc.
- event is user and browser interaction
Onclick the mouse to click an object
An object ondblclick mouse click
Onerror a error occurred when loading the document or image
An onfocus element gains focus
Onblur element loses focus
Onkeydown a keyboard key is pressed
Onkeypress a keyboard key is pressed or press
Onkeyup some keyboard keys are loosen
Onload a page or image is finished loading
Onmousedown a mouse button is pressed
Onmousemove the mouse is moved
Onmouseout mouse from one element
Onmouseover the mouse is moved to a key element
Onmouseup a release the mouse button is
Onreset reset button was clicked
Be adjusted onresize window or frame size
The onselect text selected
Onsubmit submit button is clicked
Onunload user exit page
- to button button binding events
Var BTN=document. GetElementById (" BTN ");
BTN. Onclick=function () {
Alert (" O (studying studying) O ha ha ~ the second button ");
}
B, the JavaScript document loading
1. The browser to load a page, is loaded in top-down order, read a line when I was running a line, if the scripts to write in the above, when executing code page is not loaded
2. The onl oad event trigger after completion of the entire page is loaded, bound for the window a onl oad event
3. Window. onl oad behind only appear once on a page, the code will overwrite the previous
4. Write js code in the bottom of the page, which is to ensure that when executing code page has finished loading
C, JavaScript Event object (Event)
1.
Mouse and keyboard attribute
Property description
AltKey return when the event is triggered, "ALT" whether is pressed,
Button to return to when the event is triggered, which mouse button was clicked,
ClientX return when the event is triggered when the mouse pointer coordinates,
ClientY return when the event is triggered when the vertical coordinates of the mouse pointer,
CtrlKey return when the event is triggered, whether the "CTRL" key is pressed,
MetaKey return when the event is triggered, whether the "meta" key is pressed,
RelatedTarget returns and events related to the target node,
ScreenX returned when an event is triggered when the mouse pointer coordinates,
ScreenY returned when an event is triggered, the vertical coordinates of the mouse pointer,
ShiftKey return when the event is triggered, whether the "SHIFT" key is pressed,
2. The onm ousemove
- the event will be triggered when the mouse in the element
- event objects: when the response function of the event is triggered, the browser every time an event object will be passed as arguments to pass into the response function, in the event object encapsulates all the current event related information, such as: the coordinates of the mouse keyboard that button is pressed, the direction of the mouse wheel rolling
- in IE8, the response function is triggered, the browser will not pass the event object,
- in IE8 and the following browsers, is to save event object properties of the window as the object of the
- clientX can obtain the level of the mouse pointer coordinates
- clientY can obtain the vertical coordinates of the mouse pointer
Var X=event. ClientX;
Var Y=event. ClientY;
TXT. InnerHTML="X=" + X + Y="" + Y;
D, JavaScript event object case _ moving love
1. The processing compatibility issues:
Event=event | | window. The event;
2. To obtain the coordinates of the cursor to the
ClientX and clientY: used to capture the mouse current visible window, the coordinates of div offset is relative to the entire web page
Var left=event. ClientX;
Var top=event. ClientY;
3. The pageX and pageY: used to get the coordinates of the mouse relative to the current page, but this property are not compatible in IE8, so if you need compatible with Internet explorer, do not use
Var left=event. PageX;
Var top=event. PageY;
4. The scroll bar rolling distance:
- Chrome think the browser's scrollbar is body, can through the body. The scrollTop for
- firefox browser that the browser's scrollbar is HTML
- document. Can you use the latest Chrome documentElement. ScrollTop gain value
E, JavaScript event bubbling (mercifully)
1. - the so-called bubble means the upward transmission of events, when the offspring elements on the event is triggered, the ancestor element of the same event will be triggered
- in most cases bubbling in the development are useful, if you don't want bubble can occur through the event object to cancel bubbling event. The cancelBubble=true
Event object: event=event | | window. The event;
Bubble: cancel the event. The cancelBubble=true;
F, JavaScript event delegate
1. For each a tag binding a click respond to events, the operation is more troublesome, and the operation to an existing binding a tag can only click event, the newly added hyperlinks to rebind
2. We hope to bind only one event, can be applied to multiple elements, even if the element is added, we can try to bind them to the elements of a common ancestor element
3. The event delegate:
- refers to the events and unified binding elements to the common ancestor element, such as descendant elements on the event triggered, would have been bubbling to the ancestor element, thus to handle events by the response function of the ancestor element
- event delegate is using bubbling through the delegate can reduce the number of event, improve the performance of the program
//event object attribute target: return elements that raised the event followed by the target node (event)
List. The onclick=function (event) {
Event=event | | window. The event;
If (event. The target. The nodeName=="A") {
Alert (" a label by clicking the ");
}
Alert (" a label by clicking the ");
}
G, JavaScript event binding (expand)
1. Use object.=function form binding events
- it is only once for the same element to bind to the same event at the same time, can't bind multiple times, if the bind multiple times, later will override the previous
2. The addEventListener ()
- in this way can also bind response function for the element
- parameters:
1. The string of events, do not add on
2. The callback function, this function is called when the event trigger,
3. Whether the capture phase triggering event, need a Boolean value, generally spread false
Can use the addEventListener () at the same time as an element of the same event multiple response function
So when the event is triggered, response function will be implemented according to the function of binding order
This method does not support IE8 and under browser
3. The addEventListener () of this, it is binding event object
AttachEvent () of this, it is the window, it is necessary to unify two methods of this
4. Parameters:
- obj to bind an event object
String - eventStr events (on)
- the callback callbacks
- most of the browser to element binding events
Obj. AddEventListener (evenStr, callback, false);
- Internet explorer and the browser
This value is determined by the call object
Obj. AttachEvent (" on "+ evenStr, function () {
The callback. Call (obj);
});
H, the spread of 77 _javascript events (expand)
1. The spread of events
- about events spread netscape and Microsoft have different understanding of
- Microsoft think events should be spread by outside introversion, that is when the event is triggered, should trigger an event in the current element, then spread to the ancestor element of the current element, also said the event should be in the bubbling phase,
- netscape think events should be the spread of the outside-in, namely the current event fires, should trigger the ancestor element of the outermost layers of the current element, then transmitted to offspring in the element

- the W3C synthesis, the two companies will event propagation is divided into three stages
1. The capture phase
- when the capture phase from the outermost layer of the ancestor element, to the target element capture of events, but the default will trigger events
2. The target stage
- event capture to the target element, capture the end start triggering event on the target element
3. The bubbling phase
- events from the ancestor element of the target element to his, in turn trigger an event in the ancestor element

- if you want to capture phase trigger events, can be the addEventListener () the third parameter is set to true
Usually we don't want to in triggering event capture stage, so the parameters are generally false
- IE8 and not capture phase in which of the following browser
*/
/* the W3C: the world wide Web consortium, Web technology is the most authoritative and influential international neutrality technical standards organization */
}
Parameters:
Obj to bind an event object
EventStr event string (not on)
The callback callbacks
For example:
Function to bind (obj, evenStr, callback) {
If (obj. AddEventListener) {
//most of the browser to element binding events
Obj. AddEventListener (evenStr, callback, false);
} else {
//Internet explorer and the browser
//this value is determined by the call object
Obj. AttachEvent (" on "+ evenStr, function () {
The callback. Call (obj);
});
}
}
I, JavaScript event case _ drag
1. Drag and drop process
1. When press the mouse dragged element, began to drag the onm ousedown
2. When the mouse moves by drag and drop the element moves with the mouse onm ousemove
3. When the mouse to loosen, dragged element is fixed in the current position onm ouseup
2. When press the mouse dragged element, began to drag the onm ousedown
Box. onm ousedown=function (event) {
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull