jquery-Understanding Events

I. Understanding of EVENTS
1. What is an event
The event is that the Web browser notifies the application (such as our JS) that something has happened!
We can make arrangements for these specific things in advance so that we can interact with each other!
2. Event Target
You can simply understand that the most specific target element for an event is the event target, and sometimes it may be document or window!
3. Event Type
The event type is a string that describes what type of event occurred, and you can simply understand the name of the event!
What are the common types of events?
1) Common browser-related event types:
①resize
Triggers on the Window object or frame when the size of the windows or frame changes
②scroll
Triggered when the user slides (scrolls) The contents of an element with scroll bars
Sliding the entire page will trigger on document and window
③error
Triggered on the window when a JavaScript error occurs, triggered on the element when the image cannot be loaded, when the embedded content cannot be loaded in the <object>
element, or trigger on a frameset when one or more frames fail to load
2) common types of events related to document loading:
①load
Fires on the Window object when the page is fully loaded, including external resources such as all images, JavaScript files, CSS files, and so on.
When all frames are loaded, they are triggered on top of the frameset,
Triggered on an IMG element when the image is loaded
When content embedded with the object element is loaded, it fires on the object element
To put it bluntly: when content (including external resources) is loaded, it is triggered on the corresponding element object
②beforeunload
Triggers this event on the Window object, which makes it possible for developers to block the operation before the page is unloaded.
This event will be triggered before the browser unloads the page, which can be used to cancel the uninstallation and continue to use the original page.
Set the ReturnValue property of the event object to the content to be displayed to the user, and return it to be compatible with various browsers;
3) commonly used form-related event types:
①blur
Fires on the corresponding element when the element loses focus, and the event does not bubble
②focus
triggered on the corresponding element when the element receives focus, this event does not bubble
③select
triggers on the corresponding element when the user selects one or more characters in a text box (<input> or <texterea>)
④change
For <input> and <textarea> elements, trigger on corresponding element when they lose focus and value value changes
For the <select> element, triggers on the SELECT element when its options change
⑤submit
The browser triggers a submit event on the corresponding form before sending the request to the server
4) commonly used keyboard-related event types:
①keydown
Triggered when the user presses any key on the keyboard, and if pressed, the event is repeatedly triggered
The KeyCode property in the event object represents the key code
②keyup
Triggered when the user releases a key on the keyboard
③keypress
Triggered when the user presses a character key on the keyboard, and if pressed, the event is repeatedly triggered
The CharCode property in the event object represents the ASCII code
5) Common mouse-related event types:
Our mouse-related event types best reflect "event propagation", since we need a special lesson to learn "event propagation" later on,
So we're going to avoid the concept of event propagation when we talk about mouse-related event types in this class!
①click
Triggered when the user clicks the mouse or presses the ENTER key or moves the user's touch
②dblclick
Triggered when the user double-clicks the mouse
③mousedown
MouseDown event occurs when the mouse button is pressed
Unlike the Click event, the MouseDown event requires only the key to be pressed, and it does not need to be loosened to occur
④mouseup
Triggered when the user releases the mouse button
⑤mouseenter
triggered when the mouse cursor moves from outside the element to the range of elements, this event does not bubble
⑥mouseleave
triggered when the mouse cursor on an element is moved outside the range of elements, this event does not bubble
⑦mouseover
triggered when the mouse pointer moves within the bounds of an element, or when any descendant element is moved in
⑧mouseout
Triggered when the mouse moves from the current element to another element (even if the element moved to is the descendant element of the current element or leaves any descendant elements)
⑨mousemove
Repeatedly fires when the mouse pointer moves inside an element

4. Event handlers (event listeners)
In fact, the incident has been happening, some people will ask why I did not feel it? Because you didn't respond to the incident! How to respond?
An event handler for the "element" binding (a function that triggers the execution of the function when the corresponding event occurs on the specific element)
The binding of this function we can call event handlers!
We use the DOM object's AddEventListener method to bind the corresponding event handler to the specific target.
Internet Explorer 8 and earlier versions of IE do not support AddEventListener (), and Opera 7.0 and earlier versions are not supported.
Of course we are just using this native method to demonstrate it, and then jquery will provide a way to be compatible with various browsers!
AddEventListener () parameter description:
EventType: String representing the type of event being monitored
Function: An event that executes when a predetermined target occurs
Usecapture: (optional) Boolean value, whether registered to the capture phase, false by default
5. Event propagation (event flow)
Event propagation refers to the order in which events propagate in the page (event flow)
Since there may be a lot of elements in the same event, then there is always a sequence?
Event propagation describes the order in which events are received from the page. Interestingly, the IE and Netscape development team at the time actually put forward the concept of almost the exact opposite of the event flow.
The event propagation sequence proposed by the IE development team was the event bubbling, while the event propagation order presented by the Netscape company was captured by the event.
Event propagation sequence proposed by IE Development team: event bubbling
That is, the event starts with the most specific element (the node that has the deepest nesting level in the document) and then propagates up to the less specific node (document)
Event propagation sequence proposed by Netscape Company: Event capture
The idea of event capture is that less specific nodes should receive the event earlier, and the most specific node should receive the event at the end.
The purpose of "capture" is to find the first level of the search, in the process of looking for the event to propagate to them, until the specific event target.
Older versions of IE browsers are not supported (ie versions below IE9)
The way the event is propagated (we can call it DOM event propagation, or DOM event flow)
Event propagation has three phases: the event capture phase, the target stage, and the event bubbling phase

Event Capture Phase: If there is a handler function bound at the event capture stage, it is executed in the order captured
In the target stage: if there are handlers directly bound to the event target, the order of the bindings is executed (regardless of whether the third argument of AddEventListener is true or false)
Event bubbling phase: If there are handler functions bound in the event bubbling phase, they are executed in the bubbling Order

1<! DOCTYPE html>234<meta charset= "Utf-8"/>5<title>demo</title>6<script type= "Text/javascript" src= "Js/jquery-1.11.2.min.js" ></script>7<style type= "Text/css" >8 #div1 {9 width:300px;Ten height:300px; One background: #eee; A border:1px solid #ccc; -     } -</style> the<script type= "Text/javascript" > -$(function(){ -     /* - //Because DIV1 is the event target and is bound to many of the same event handlers on their body, the order of execution is based on the binding successively!  + var Div1=document.getelementbyid (' Div1 '); - div1.addeventlistener (' click ', Function () { + console.log (' 1div_true '); A },true); at div1.addeventlistener (' click ', Function () { - console.log (' 0div_false '); -     }); -     */ -      -     varHtml=document.getelementbyid (' HTML '); in     varBody=document.getelementbyid (' body '); -     varDiv1=document.getelementbyid (' Div1 '); toWindow.addeventlistener (' click ',function(){ +Console.log (' Window_false ');  -});//bubbling phase, which executes when the Click event is received theWindow.addeventlistener (' click ',function(){ *Console.log (' Window_true ');  $},true);Panax NotoginsengDocument.addeventlistener (' click ',function(){ -Console.log (' Document_false ');  the     }); +Document.addeventlistener (' click ',function(){ AConsole.log (' Document_true ');  the},true); +Html.addeventlistener (' click ',function(){ -Console.log (' Html_false ');  $     }); $Html.addeventlistener (' click ',function(){ -Console.log (' Html_true ');  -},true); theBody.addeventlistener (' click ',function(){ -Console.log (' Body_false '); Wuyi     }); theBody.addeventlistener (' click ',function(){ -Console.log (' Body_true ');  Wu},true); -      AboutDiv1.addeventlistener (' click ',function(){ $Console.log (' Div1_true ');  -},true); -Div1.addeventlistener (' click ',function(){ -Console.log (' Div1_false ');  A     }); +     }); the</script> - $<body id= "Body" > the<div id= "Div1" ></div> the</body> the
PS: Not all event types support event bubbling! The low version of IE does not capture this stage!
A bunch of mess, wait for us behind jquery to solve this problem!
6. Event Object
When our event handler function executes, our event handler will accept the event object, which we can accept with a variable.
Of course, the lower version of IE is not acceptable, and some property names within the event object and the standard property names of the Web site may also be inconsistent!
Inside the event object, contains data about the event type and the target, different event types, and the properties and methods that are included may not be the same!

Bubbles Boolean Indicates whether the event bubbled
Preventdefault () Function cancels the default behavior of the event. If cancelable is true, you can use this method
The stopimmediatepropagation () function ignores event handlers that have not yet been executed by the current element; The propagation of the terminating event in the element tree species
Stoppropagation () function executes after all the event handlers of the current element; the continuation propagation of the terminating event in the element tree
Targets for target Element events
Currenttarget element whose event handler is currently processing the event
The element object to which the currently executing event handler is bound!
Note: Within an event handler, this is always equal to the value of Currenttarget, and Target contains only the actual target of the event
The type of the event that the type String is triggered
7. Event Delegation
Normal thinking:
Bind the event handler directly to the event target!
Event delegate:
Delegate event handlers to their ancestor objects!
Event bubbling!
Step back, Brighter!
Note the point:
Event type must support event bubbling!
It is best to select a delegate object as an example of an event near the target!
jquery-Understanding Events