Learning Objectives:
| Section number | knowledge | requirements |
|---|---|---|
| The first section forms document events | Get focus events | To understand |
| Out-of-focus event | To understand | |
| Section 2 Keyboard events | The type of keyboard event | To understand |
| Keyboard properties | To understand | |
| Section 3 Rolling events | Back to top of page | master |
| Scroll event | master | |
| Properties of the scroll event | master | |
| Section 4 Mobile phone touch events | Mobile phone Touch events | master |
| Section 5 Form registration cases | Form Registration Case | master |
Form document events
Focus: The node where the JS is currently interacting with the user is called focus. It can be likened to a place where human eyes converge.
Syntax: Get focus and lose focus events can use either DOM1 or DOM2 binding
Myna summary:
Neither of these events supports event bubbling.
1.1 Get focus events
I2. onfocus = function () {console.log(“i2 gets focus “)};
I1. addEventListener(‘focus’, function () {console.log(‘i1 catches events ‘); }, true);
1.2 Out-of-focus events
I1. addEventListener(‘blur’, function () {console.log(‘i1 captures events ‘); }, true);
I2. onblur = function () {console.log(“i2 lost focus “)};
1.3 OnInput and Onchange Events
Onchange: Triggered when an element changes.
Oninput: Emitted when input is made to an element.
The difference between:
Onchange: This event is triggered when focus is lost.
Oninput: This function is triggered immediately when the input content is entered.
Keyboard events
2.1 Types of Keyboard events
Keyboard events are automatically triggered when users operate the keyboard, usually including the following three types:
(1) onKeyDown: This event can be triggered when the user presses any key. If you hold, events will fire continuously. (2) onKeyPress: This event can be triggered by pressing any key (except the function key). (3) OnKeyUP: triggered when the user releases the key
Ps: Keyboard events are usually bound to elements that require user input (such as input), but since keyboard events are bubbling by default, it is possible to bind keyboard events directly to body.
2.2 Keyboard Attributes
Key and keyCode properties
KeyCode: Returns the code of the keydown and keyUP event and the Unicode character (ASCII value) of the keyPress event.
A:65, A: 97,0:48, space bar: 32.