vue11-1 Vue中的键盘鼠标事件和事件下的别名方法

一.  键盘和鼠标事件监听

v-on:click(@click) ——>注册点击事件
v-on:keydown(@keydown) ——>注册键盘按下事件
v-on:keyup(@keyup) ——>注册键盘弹起事件
v-on:mousedown(@mousedown) ——>注册鼠标按下事件
v-on:mouseover(@mouseover) ——>注册鼠标弹起事件
v-on:submit(@submit) ——>注册表单事件
v-on:scroll(@scroll) ——>注册滚动条(上下按键)事件
v-on:wheel(@wheel) ——>注册滚轮事件

　　1. --滚动事件

滚轮事件:  wheel

　　监测鼠标滚轮触发,主要滑动滚轮,不管是否到顶或到底,都会持续触发

滚动条事件: scroll

　　监测右侧滑动条(鼠标滑动或键盘上下按键),滑动条运动,事件触发,停止则不触发

　　　　

 

二.  键盘事件后的具体按键别名的使用

　　多数键盘上的按键都可以绑定到键盘事件上,测试和使用方法:

　　　　1.  获取到对应的键名和值

　　　　获取方法: 标签的默认返回e,  e.key为键盘按键的名字,  e.keyCode为键对应的值

　　　　2. 在标签中 @事件名.键名 来使用, 或者在代码中,判断 e.keyCode是否等于该按键的值,来书写代码

　　注意1: 如果按键获取到的名字为多个单词组成的,如CapsLock, 使用时,其正确名为: caps-lock

　　注意2: 一般的键, 如enter,可以写为Enter

常用的七种按键: 

@keyup.enter        enter键触发
@keyup.delete      delete和backspace键触发(删除键 和 退格键 都能触发,但delete不会删除输入内容)
@keyup.esc            esc键触发
@keyup.space       space键触发
@keyup.tab            tab键触发　　(特殊按键,因tab本身功能是切换焦点,按下tab时就会切换,所以tab常用在@keydown.tab)
@keyup.up             up键触发
@keyup.down       down键触发
@keyup.left            left键触发
@keyup.right         right键触发   


除tab外其它特殊按键:
　　系统修饰键: ctrl,  alt,  shift,  meta(win键)  
　　(1) 配合keyup使用: 按下修饰键,在按下其它键,随后释放其它键,事件才触发, 如@keyup.ctrl.y='绑定方法'
　　(2) 配合keydown使用: 正常触发事件

 

　　--回车:  输入框中,用户输入时不捕捉输入数据, 按下回车键后才捕捉