【前端学习日记】Vue中的鼠标事件和键盘事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端学习日记】Vue中的鼠标事件和键盘事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

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

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

prevent：阻止默认事件

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

stop：阻止事件冒泡

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

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

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