【前端学习日记】Vue中的鼠标事件和键盘事件

Vue提供了很好用的模板语法，包括插值语法 {{ }} 和指令语法v-？。使用指令语法很容易就可以为文档对象添加事件。

比较常用到的事件就是鼠标事件了。当用户使用鼠标点击网页上的某个元素，或者使用键盘按下某个键，会执行对应的回调（callback），进而在短时间内产生动作。

比如给button标签添加一个click（点击）事件，使用插值语法的简写形式（省略事件绑定语法v-on:click）：@click=“showinformation”，即当鼠标点击时，执行showinformation这个函数。

接着在script结构的methods配置项中编写函数的执行步骤和逻辑，就完成了整个事件。

上述代码执行后，点击按钮，会在控制台输出事件实例和参数。

在鼠标事件中，常会用到一些修饰符，来起到对事件的限定作用，常用的如：prevent、stop、once。

prevent：阻止默认事件

如对一个超链接标签使用@click.prevent="showinfor"，点击超链接，在执行完事件回调后，超链接并不会发生跳转。这些功能真的很秒。比如阻止一些钓鱼链接之类的。

stop：阻止事件冒泡

先讨论一下事件冒泡和捕获这个概念。当元素嵌套的父元素和子元素上都有一个相同（名称和类型均相同）的事件，此时父元素只是一个容器。当我们触发子元素事件，并且产生回调后，父元素（容器）也会执行这个事件，并且总是由内向外的执行顺序，这就是事件冒泡。不过，当我们点击外层父元素时，是不会触发子元素事件的。再说到事件捕获，在触发事件后，未产生回调前，有一个过程，就是事件捕获，它总是由外到内的。如刚刚那个例子，即使我们点击的是子元素，但是捕获的过程却是由父元素到子元素的，所以当我们直接点击父元素，一开始就捕获到了对应事件，是不会触发子元素事件的。

@click.stop="showinfor"，stop修饰符的作用就是阻止事件冒泡，在上面那个例子上，点击子元素就不会触发父元素的事件。

once：限制事件只作用一次，多次点击只有第一次有效。

还是超链接的例子，@click.once="showinfor"，加了once修饰符后，只有第一次点击超链接会发生跳转，但会执行事件回调。

 有点意思的是，prevent修饰符一次都不允许跳转，和once修饰符只允许跳转一次。

另外，这些限定功能不同的修饰符，是可以连着写的，如@click.stop.prevent=”showinfor”，既能阻止事件冒泡，也能阻止默认事件，

当然了，鼠标事件除了点击，肯定还有其他事件，从原生js来看，应该还有mouseup、mousedown等等不同场景，取决于项目实际应用场景。

---

键盘事件

比较常用的键盘事件应该就是keyup（按下释放触发）、keydown（按下即触发）了。

同样使用指令语法（v-on:）@keyup

通过使用Vue提供的一些常用键盘别名，轻松创建键盘事件

enter键事件：@keyup.enter="showinfor"   @keydown.enter="showinfor"

esc键事件：@keyup.esc="showinfor"   @keydown.esc="showinfor"

space键事件：@keyup.space="showinfor"   @keydown.space="showinfor"

方向键事件：@keyup.up="showinfor"   @keydown.up="showinfor"   其他方向均同

特别要注意的是：几个特别的键，ctrl、alt、shift、win(meta)键只能搭配keydown使用，因为这几个特殊的按键本身带有特定的功能，当按下时就会触发跳转，如果搭配keyup，则来不及产生功能回调就已经跳走了。

另外，对于这几个系统修饰键，还可以搭配其他非功能键，实现组合键事件，如@keydown.ctrl.y="showinfor"触发事件需要同时按下ctrl+y键才行。

另外，键盘事件不知道有没有类似于鼠标事件那样的阻止跳转之类的事件修饰符。

---

再补充一个鼠标滚轮事件

@scroll="shonwinfor"

@wheel="showinfor"

前者针对的是窗口滚动条，当滚动条动作，就会执行相应的回调，它的特点是滚动条要在回调结束后才能动作，所以可以为其加一个passive修饰符，这样就可以达到类似异步执行的效果。

后者针对的是鼠标滚轮，只要鼠标滚轮动作，就会执行相应的回调

---

以上均为小白拙见。