JavaScript event object summary
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: Adobe Dreamweaver JavaScript
Author: Huang Futao
Writing time: on April 28, 2020,
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Knowledge points list
1, event description
Event, is the document or happened in the browser window to some specific interaction instant
- the interaction between JavaScript and HTML are implemented through events,
Personal understanding: is access to the HTML page the user caused a series of operations, the user to perform certain actions, then the corresponding code is triggered, which prompted box, etc.,
2, document load
(1) whether we write JS code style of internal or external style, we all should be written in HTML page below, because the browser loads a page from top to bottom, read a line is loaded a line, so it is written in here, is to ensure that the page is loaded, to trigger the related events,
Window. (2) load JavaScript event (onload) on the page can only appear once, if there are multiple times, behind the front cover, but in the jQuery loaded event ($(document) ready ()) on the page can appear multiple page load event, and later won't put in front of code coverage,
3, the event object
(1) the event object description
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
(2) the browser compatibility problems
In Internet explorer, under the Internet explorer browser was to preserve the property of the event object as the window of the
More than other browsers and Internet explorer browser, the response function is triggered, the browser will not pass the event object,
So need a compatible event on the event object=window. The event | | event;
4, event object's properties:
Mouse/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,
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,
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,
ShiftKey return when the event is triggered, whether the "SHIFT" key is pressed,
5, some events that are widely used in the
Mouse events
1) click onclick event
(2) the ondblclick double-click events
(3) onm ousedown when the mouse click run script
(4) onm ouseup release when the mouse run script
(5) onm ousemove when moving the mouse run script
6 onm ouseover element when the mouse moves to run the script on
All landowners onm ousewheel when the mouse wheel rolling running script

Keyboard events (generally will give some to get the focus object or binding document)
1) onkeydown: the keyboard is pressed event
(2) the onkeyup: the keyboard is loosened events
(3) keyCode: coding can get a keyboard, press a different button, there will be a different encoding
(4) altKey: pressing Alt if it returns true, otherwise it returns false
(5) ctrlKey: pressing CTRL if it returns true, otherwise it returns false
6 shiftKey: if the shift is pressed return true, otherwise it returns false

6, delegate of events
(1) introduction to
What is the event delegate? To an existing tag when we add a click event can be, but the newly created TAB, but unable to response to the click event, when we want to create labels for new add a click event, then you need to for the newly added links need to be binding, the magnitude of the event is assigned with less code to solve this problem, 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
(2) the event to the use of the
- refers to the events and unified binding to a common ancestor element, such as descendant elements on the event triggered, would have been bubbling to the ancestor element, and through the response function of the ancestor element to handle events, such as we want to create the li tag for both existing and new add the click event, we just need to be a common ancestor of li ul label binding click event
- event delegate is using bubbling through the delegate can reduce the number of event, improve the performance of the program
"Attribute" of the event object target: the returned elements that raised the event followed by the target node (event), said simple point is the point of the element, the element will be triggered

7, the binding of events
Use object.=function form binding events
It 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
For example: BTN onclick=function () {alert (1)}; BTN. Onclick=function () {alert (2)}; Finally the second click event will be triggered
Solution:
(1) more than Internet explorer browser and other browser
Methods: the addEventListener (events, the callback function, Boolean value) [need] into three parameters
Parameter 1: a string of events, do not add on, for example, click event expressed in "click"
Parameters of the two: the callback function function ()} {here write to execute code;
Three parameters: whether in the capture phase trigger events, generally spread false (true said the capture phase triggering event, false otherwise),
(2) level IE8 IE8 following browser
Methods: attachEvent (events, the callback function) [takes two parameters]
Parameter 1: a string of events, add on, for example, click event expressed in "onclick"
Parameters of the two: the callback function function ()} {here write to execute code;

Note: the addEventListener () of this, it is binding event object
AttachEvent () of this, it is the window
Need to unify two methods of this
Considering the browser compatibility, so we use a function for encapsulation, determine the browser the addEventListener use cash or attachEvent method
Code://function is equivalent to the incoming of three parameter
Var BTN=document. GetElementById (" BTN ");
Function Event (eventobj, Event callback) {
If (eventobj. AddEventListener) {
Eventobj. AddEventListener (event callback, false);
} else {
Eventobj. AttachEvent (" on "+ event, the callback);
The callback. Call (eventobj);
}
}
//function calls, call writing arguments
Bind (BTN, "click", function () {alert (2); });
Description: Eventobj. AttachEvent (" on "+ event, the callback function), the" on "is written in the form of a string, so when the function does not need to bind (BTN," onclick ", function () {alert (2); }); Make calls, but bind (BTN, "click", function () {alert (2); });

8, JavaScript event bubbling (mercifully)
- 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
- just before the offspring element is triggered code to join the event. The cancelBubble=true, if there are multiple elements, but we don't want them to the largest ancestor element also triggers the same event, we are all descendants of the element with the other code,

9, capture of events and event cancellation capture (setCapture () method and releaseCapture () method)
- the method supports Internet explorer browser can capture a only (), call the party complains on Google, although not an error on firefox, but will not trigger the method
- on the IE, if the call the method, no matter you clicked there, will be for an event capture
Grammar: capture events object. SetCapture ();
Cancel the capture event object. ReleaseCapture ();


10 and the spread of events
- the W3C combines Microsoft and netscape, the event propagation is divided into three stages
1. 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 under no capture phase in the browser