1 introduction

1.1 Service Scenarios

The VUE page listens for events such as keyboard and mouse.

The official example is in the input tag. We want the effect of not using a fixed tag.

2 Implementation Principles

2.1 Adding A Listener

mounted () {
    window.addEventListener('keyup',this.handleKeyup)
    window.addEventListener('scroll',this.handleScroll)
},
Copy the code

This is defined as the event when the keyboard is pressed and the event when the mouse wheel is rolled.

Here you can query what events there are.

Key words:

HTML DOM Event

W3school Rookie tutorial

Here is the usage of addEventListener(event,function).

Event, mandatory, string, note that the DOM event name is removed from on

2.2 Method Invocation

Methods: {/ / keyboard events handleKeyup (event) {const e = event | | window. The event | | the arguments. The callee. The caller. The arguments [0]if(! e)returnConst {key,keyCode} = e console.log(keyCode) console.log(key)}, // pulley eventshandleScroll(){
        var e = document.body.scrollTop||document.documentElement.scrollTop
        if(! e)return
        console.log(e)
    },
}
Copy the code

2.3 Removing Monitoring

destroyed () {
    window.removeEventListener('keyup',this.handleKeyup)
    window.removeEventListener('scroll',this.handleScroll)
},
Copy the code

3 afterword.

Thank you for your support. If insufficient, welcome to point out, mutual encouragement.

If you like it, please like it and thank you 😂

Welcome to my: [Github] [Nuggets] [Jane book] [CSDN] [OSCHINA] [SF]



This article adoptsCreative Commons Attribution – Non-commercial Use – Same way Share 4.0 International LicenseGrant permission.

Source: github.com/xrkffgg/Too…