Mouse events keyboard events

catalogue

1, Common mouse events

1. Common mouse events

3. Picture following mouse movement case  

2, Common keyboard events

1. Common keyboard events

2. Keyboard event object

3. Simulated express order number case

1, Common mouse events

1. Common mouse events

Mouse eventTrigger condition
onclickLeft mouse button trigger
onmouseoverMouse over trigger
onmouseoutonfocusMouse away trigger
onfocusGet mouse focus trigger
onblurLoss of mouse focus trigger
onmousemoveMouse movement trigger
onmouseupMouse bounce trigger
onmousedownMouse press trigger

1. Disable right-click menu

contextmenu mainly controls when the context menu should be displayed. It is mainly used by programmers to cancel the default context menu

//Disable right mouse button
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

2. Disable mouse selection (select Start starts selection)

//Disable mouse selection
document.addEventListener('selectstart', function(e) {
 e.preventDefault();
 })

2. Mouse event object

Event object represents the state of an event and a collection of a series of information related to the event. At this stage, we mainly use mouse event object MouseEvent and keyboard event object KeyboardEvent

Mouse event objectexplain
e.clientXReturns the X coordinate of the mouse relative to the viewable area of the browser window
e.clietYReturns the Y coordinate of the mouse relative to the viewable area of the browser window
e.pageXReturns the X coordinate of the mouse relative to the document page   IE9 + support
e.pageYReturns the Y coordinate of the mouse relative to the document page   IE9 + support
e.screenXReturns the X coordinate of the mouse relative to the computer screen
e.screenYReturns the Y coordinate of the mouse relative to the computer screen

3. Picture following mouse movement case  

Case study:

① The mouse moves continuously. Use the mouse to move the event: mousemove

② Move in the page and register the event for document

③ The picture should move a distance without occupying a position. We can use absolute positioning

④ Core principle: each time the mouse moves, we will get the latest mouse coordinates. Take the x and y coordinates as the top and left values of the picture to move the picture

Implementation code:

<img src="./img1.jpg" alt="">

    <script>
        //1. Get img object
        var pic=document.querySelector('img');
        //2. Register the mousemove event for the file
        document.addEventListener('mousemove',function(e){
        //3. Obtain the coordinates of the mouse in the page
            var x =e.pageX;
            var y=e.pageY;
            //4. Set the coordinate value of the mouse to the picture
            pic.style.left= x - 80 +'px';
            pic.style.top=y - 80+ 'px'
        })
    </script>

2, Common keyboard events

1. Common keyboard events

Events can be triggered using the keyboard as well as the mouse

Keyboard eventsTrigger condition
onkeyupTriggered when a keyboard key is released
onkedownTriggered when a keyboard key is pressed
onkeypressTriggered when a keyboard key is pressed     (however, it does not recognize function keys   (e.g. ctrl shift arrow, etc.)

  be careful:

1. If you use addEventListener, you do not need to add on

2. The difference between onkeypress and the previous two is that it does not recognize function keys, such as left and right arrows, shift, etc.

3. The execution sequence of the three events is: Keydown -- keypress -- K

2. Keyboard event object

Keyboard event object propertiesexplain
keyCodeReturns the ASCAII value of the key

be careful:

onkeydown and onkeyup are case insensitive, and onkeypress is case sensitive.

In our actual development, we use keydown and keyup more, which can identify all keys (including function keys)

Keypress does not recognize function keys, but the keyCode attribute is case sensitive and returns different ASCII

3. Simulated express order number case

case analysis

① When the express order number is entered, the large font box (con) above displays (the text in this box)

② At the same time, get the value in the express order number and assign it to the con box (innerText) as the content

③ If the content in the express order number is empty, the large font box (con) box is hidden

④ Note: the characteristics of keydown and keypress in the text box: when their two events are triggered, the text has not fallen into the text box.

⑤ When the keyup event is triggered, the text has already fallen into the text box

⑥ When we lose focus, we hide the con box

⑦ When we get the focus and the content of the text box is not empty, the con box is displayed  

//HTML code

 <div class="search">
        <div class="con"></div>
            <label for="">
    courier number:          
      <input type="text" placeholder="Please enter the courier number" class="num">
            </label>
        
    </div>
//CSS code

 .search{
            position: relative;
            width: 400px;
            margin: 100px auto;
        }
        .con{
            display: none;
            position: absolute;
            top: -40px;
            left: 90px;
            width: 171px;
            border: 1px solid rgba(0,0,0,0.2);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        .con::before{
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
//javaScript code

 //1. Get dom element
        var con=document.querySelector('.con');
        var numInput=document.querySelector('.num');
        //2. Register keyup event for input
        numInput.addEventListener('keyup',function(){
            if(this.value===''){  //If the user has no input, the con element is hidden
                con.style.display='none';
            }
            else{
                  con.style.display = 'block';
                  con.innerText=this.value;
            }
        })
        //3. Register focus events for input
        numInput.addEventListener('blur',function(){  //Lose focus, con hidden
            con.style.display='none';
        })
        numInput.addEventListener('focus',function(){  //Get focus, con display
            if(this.value!==''){
                con.value.display='block';
            }
        })

Operation results:

Tags: Javascript html5 html

Posted on Fri, 03 Dec 2021 01:52:52 -0500 by Azarath