Vue监听键盘鼠标事件

AlphaWatch 发布于2019-08-23 17:08 / 974人阅读

摘要：前言业务场景页面监听键盘鼠标等事件。实现原理增加监听这里定义了，键盘按出的时候的事件和鼠标滑轮滚动的事件。，必参，字符串，注意要把事件的名称去掉方法调用键盘事件滑轮事件移除监控后记感谢支持。

1 前言 1.1 业务场景

vue页面监听键盘鼠标等事件。

官方给的例子是在input标签中的，我们想要的效果是不使用固定标签。

2 实现原理 2.1 增加监听

mounted () {
    window.addEventListener("keyup",this.handleKeyup)
    window.addEventListener("scroll",this.handleScroll)
},

这里定义了，键盘按出的时候的事件和鼠标滑轮滚动的事件。

这里可以自行查询下有哪些事件，

关键字：

HTML DOM Event

可参考：W3school 菜鸟教程

这里根据addEventListener(event,function)的用法。

event，必参，字符串，注意要把DOM事件的名称去掉on

2.2 方法调用

methods:{
    // 键盘事件
    handleKeyup(event){
        const e = event || window.event || arguments.callee.caller.arguments[0]
        if(!e) return
        const {key,keyCode} = e
        console.log(keyCode)
        console.log(key)
    },
    //  滑轮事件
    handleScroll(){
        var e = document.body.scrollTop||document.documentElement.scrollTop
        if(!e) return
        console.log(e)
    },
}

2.3 移除监控

destroyed () {
    window.removeEventListener("keyup",this.handleKeyup)
    window.removeEventListener("scroll",this.handleScroll)
},

3 后记

感谢支持。若不足之处，欢迎大家指出，共勉。

如果觉得不错，记得点赞，谢谢大家

GPU云服务器云服务器监听键盘事件 js监听鼠标三击事件键盘鼠标鼠标键盘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103870.html

Vue.js中的v-on(事件处理)

摘要：不必担心，因为所有的事件处理方法和表达式都严格绑定在当前视图的上，它不会导致任何维护上的困难。当一个被销毁时，所有的事件处理器都会自动被删除。 Vue.js的事件处理监听事件我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。 {{msg}} var vm = new Vue({ el:.box, data:{ ...

YuboonaZhang 2019-08-21 12:05 评论0 收藏0
Vue的事件处理方法

摘要：事件处理上一篇的条件渲染与列表渲染下一篇的表单输入绑定事件监听指令可以用来监听事件来执行一些代码这个按钮被点击了次按钮方法事件处理器许多事件处理的逻辑都很复杂，所以直接把代码写在指令中是不可行的。因此可以接收一个定义的方法来调用。事件处理上一篇：Vue的条件渲染与列表渲染：https://segmentfault.com/a/11...下一篇：Vue的表单输入绑定：https://...

archieyang 2019-08-21 12:05 评论0 收藏0
vue2.0学习笔记（事件处理）

摘要：请记住，会告诉浏览器你不想阻止事件的默认行为。而单单释放也不会触发事件。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。当一个被销毁时，所有的事件处理器都会自动被删除。 1、监听事件用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 Add 1 The button above has been clicked {{ counte...

bovenson 2019-08-23 18:35 评论0 收藏0
vue的TodoMVC事例总结

摘要：缩写为数据键盘事件添加事项指令指令监听事件。这块内容只会在指令的表达式返回值的时候被渲染。清空已办事项全选取消全选方法用于调用数组的每个元素，并将元素传递给回调函数。 gitHub地址：https://github.com/gaozhixiao... 功能拆分：渲染数据键盘事件：添加事项鼠标点击事件：移除事项显示未办事项数据全部事项、未办事项、已办事项状态切换清除全部完成...

CKJOKER 2019-08-26 10:10 评论0 收藏0
1-4. Vue.js核心知识之事件处理

摘要：我们可以用指令监听事件，并在触发时运行一些代码。点击按钮，后面的函数会把参数带入执行，弹窗显示点击计算事件修饰符事件处理程序中经常会用到或，这里帮我们很容易的就实现了。我们可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。监听事件点击次数加1 你已经点了 {{ counter }} 次了 new Vue({ el: ...

darkbaby123 2019-08-23 18:00 评论0 收藏0