1. Event-related concepts
- Event Type: A string that is used to describe what type of event occurred
- Event Target: Is the event that occurs or the object associated with it.
- Event handlers (event listeners): A function that handles a cargo response event.
- Event object: Is an object that is related to a specific event and contains detailed information about the event.
- Event propagation: Is the process by which the browser determines which object triggers its event handlers.
- Event capture: The specific handler registered on the container element has the opportunity to intercept it before the event propagates to break the real target.
- Prevent label default events from occurring
2.Window Events
- Focus,blur does not bubble. Focusin,focusout Bubbles.
- Load is triggered when the document and all other external resources (pictures) are fully loaded and displayed to the user.
- The Unload event is relative to load. Triggers when the user moves away from the current document to another document.
- The Beforeunload event is similar to unload, confirming that you are sure to leave the current page.
- Onabort when image loading is interrupted, only IMG is supported
- Resize is called when the browser window is resized
- Scroll when scrolling the wheel
3. Mouse Events
- Position of mouse in window: Clientx,clienty
- The button and which specify which mouse button is pressed.
- When the keyboard secondary key is pressed, the corresponding property Altkey,ctrlkey,metakey,shiftkey is set to true.
- For the Click event, the Detail property specifies whether it is a click, double click, or three click.
- The ContextMenu event usually occurs before right-clicking the Out menu, and canceling the event prevents the menu from appearing.
- For mouseover and Mouseout events, the event object has a Relatedtarget property that describes the other elements of the process design.
- MouseOver and Mouseout events will bubble, IE offers non-bubbling versions, MouseEnter and MouseLeave.
- The MouseWheel event uses the mouse wheel, passing event object properties to specify the size and orientation of the wheel rotation.
4. Keyboard Events
- The event object passed to the keyboard event handler has keycode, which specifies which key is pressed or released.
- The Altkey,ctrlkey,metakey,shiftkey is used to describe the state of the secondary key.
- KeyDown and KeyUp are low-level keyboard events. When the KeyDown event produces a printable character, the KeyPress event is triggered between the two.
- The event object specifies the resulting character rather than the pressed key.
- DOM3 rules to replace keypress with TextInput events. The property of the event object is data.
5.DOM Events
6.HTML EventsH5 defines the history management mechanism, which allows the web app to be used with the browser's back and forward buttonsInteraction. The events involved are hashchange and popstate.
7. Touch screen and mobile device events
8. Registering Event Handlers
<1> set JavaScript Object properties to event handlers (this points to the event target) (scope chain where it is defined) such as:
// set the OnLoad property of the Window object to be the event handler window.onload=function() {}
This registration technology applies to all browsers. But the disadvantage of this event registration is that it involves all around the assumption that each event target will have a maximum of one handler for each event type. This is obviously not possible, because sometimes some event objects have multiple event handlers.
<2> Set HTML tag properties for event handlers (scope chain through width has changed) such as:
<onclick= "alert (' I am here! ')" ></ Button >
If you include more than one JavaScript statement, you need to use a semicolon split. when you specify JavaScript as the value of an HTML event handler property, the browser translates the code into the following function: of Course, this mix of programming styles in HTML is not in our favor .
<3> Registering an event handler with AddEventListener (this points to the event target) (scope chain where it is defined) any object that can be an event target is:
- Window object
- Document Object
- and all document elements
addeventlistener(parameter 1, parameter 2, Parameter 3):parameter 1: string. Event type (minus the on prefix)Parameter 2: function. The party formulates the function that is called when the event occurs. Parameter 3: boolean value. Usually false, which is true when it becomes a capture function. such as:
<id= "No"> Click here </div>
var no=document.getelementbyid ("no"); No.addeventlistener ("click",function() { Alert ("I AM here!")},false);
it corresponds to: RemoveEventListener
The RemoveEventListener event cannot remove an anonymous registration function.
<4> using attachevent () (Thispoint to window) (scope chain where it is defined) because AddEventListener and RemoveEventListener were not supported prior to IE9, the previous version defined Attachevent and derachevent.
There is also a difference between the two:1. Since the IE event model does not support event capture, Attachevent and derachevent. Only two parameters2.attachEvent and Derachevent. The event type of the first argument is added "on". 3.attachEvent allows the same event to be registered more than once, and how many times the number of calls are registered. This is a workaround to window:
9. The return value of the event handler
- A return value of false tells the browser not to perform the default action associated with this event.
- For example, the OnClick event of the form Submit button returns false to prevent the browser from submitting the form.
- It is important to understand that the return value of an event handler is only meaningful for handlers registered through the property.
- You must call the Preventdefault () method or set the ReturnValue property of the event object when registering with events such as AddEventListener.
10. Cancellation of the event
<1>IE9 before using returnvalueIE9 after Preventdefault
<2> Cancellation of event propagation: stoppropagation ()
JavaScript authoritative design-Event handling Introduction (Brief study note 17)
