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.