Web front end lesson 33 – JS event handling – keyboard, touch

Time:2021-9-20

1. Keyboard events

Keyboard events refer to the events that will be triggered automatically when the user operates the keyboard. They are usually divided into the following three types

①   Keydown, the user can trigger this event by pressing any key. If you hold it down, the event will be triggered continuously

②   Keypress: the user can trigger this event by pressing any key. If you hold it down, the event will be triggered continuously

Any key here refers to the key that can be displayed,Function keys are not included

           The keypress method is case sensitive and Keydown is not

③   Keyup, an event is triggered when the user releases the key

Keyboard events are usually bound to elements that require user input (for example   Input), but becauseKeyboard events adopt the event bubbling mechanism by default

Therefore, bind keyboard events directly to   It is also allowed on the body

Syntax: element node. On + event name=   function(){ };

2. Keycode attribute

In keyboard events, you can   Event. Keycode to get the coded value of the pressed key

Through this attribute, you can get which keys the user has pressed

3. Summary of characteristics

①   Capture object range differences

Keypress is mainly used to capture: numbers (including   Shift + symbols of numbers), letters (including upper and lower case), keypad and other contents that can be displayed on the screen

However, it cannot normally respond to the system function keys (enter, delete, direction, etc.), and it cannot effectively respond to the Chinese input method

and   Keydown and   Keyup can usually be captured on the keyboard except   All keys except prtsc (special keys of special keyboard are not in the scope of discussion)

②   Capture character length differences

Keypress can only capture a single character

Keydown and   Keyup can capture key combinations

③   Capture case differences between characters

Keypress can capture the case of a single character

Keydown and   Keyup for single character capture   The case of keycode is the same value, that is, the case cannot be judged

④   Capture character digit differences

Keypress does not distinguish numeric characters between the keypad and the main keyboard

Keydown and   Keyup distinguishes numeric characters between the keypad and the main keyboard

⑤   exceptional case

Prscrn key   Keypress, Keydown, and   Keyup cannot be captured

Up, down, left and right function keys   Keydown and Keyup can be obtained   Keycode with the same value

4. Common keyboard keys keycode

  

Keyboard events


    
    

    var tips=document.querySelector('.tips')
    var input=document.querySelector('input');
    input.onkeydown=function () {
        console.log('downKey:'+event.keyCode);
        if (event.keyCode==13){
            console.log(input.value);
        }
    }
    input.onkeypress=function(){
        console.log('pressKey:'+event.keyCode);
    };
    //Detect whether the uppercase lock is on
    var flag=false;
    document.body.onkeydown=function () {
        if (event.keyCode==20){
            if (flag ==false){
                flag = true;
                Tips. InnerHTML = 'caps lock is on';
            }else{
                flag = false;
                Tips. InnerHTML = 'caps lock closed';
            }
        }
    }

 

5. Touch event

①   Touchstart is triggered when a finger touches the screen, even if there is already a finger on the screen

②   Touchmove, a continuous trigger when a finger slides on the screen

③   Touchend, triggered when the finger moves away from the screen

④   Touchcancel is triggered when the system stops tracking the touch (such as telephone access, pop-up information, etc., which is generally used to trigger pause operations)

Syntax example:

Element node. Addeventlistener (‘touchstart ‘, function() {});
Note:

Unless otherwise specified, all events are bubbling events

Mobile phone touch events must be used   Binding in dom2 mode

You can add multiple touch events to an element

6. Properties of event object

Event object is an object used to save all information related to an event when an event is triggered

Event objects are basically automatically generated by the system and do not need to be created manually

Example:

Element node. Addeventlistener (‘touchstart ‘,

      function(event){

        console.log(‘ touches begin ‘);

      });

Main attributes:

① Touches, indicating the current tracked touch operation   Array of touch objects (list of all touch points on the current screen)

②   Targettouches, event specific   Array of touch objects (list of all touch points on the current object)

③   Changetouches, indicating what has changed since the last touch   Array of touch objects (list of touch points related to the current event)

7. Properties of touch object

Touch the object, i.e   Of the event object   Each element in the touches attribute

A touch creates a touch object

Many properties are available in the touch object:

Clientx, touch the abscissa of the target in the viewport

Clienty, touch the ordinate of the target in the viewport

Identifier, which indicates the unique ID of the touch

Pagex, touch the abscissa of the target in the page

Pagey, touch the ordinate of the target in the page

Screenx, touch the X coordinate of the target in the screen

Screen, touch the Y coordinate of the target in the screen

Target, touch   DOM node coordinates

In general, when the event is triggered“   Pagex and   “Pagey” two attributes to get the location of the current node

Obtain the writing format of touch point coordinates:

    event .touches[n] .pageX / pageY;   //  N indicates the number of touch points

var divTouch=document.querySelector('.divTouch');
    divTouch.addEventListener('touchstart',function () {
        console.log(event.touches[0].pageX);
        console.log(event.touches[0].pageY);
        console.log(event.touches[0].clientX);
        console.log(event.touches[0].screenX);
        console.log(event);
    });