Vue中的事件处理

事件处理

v-on

我们可以用v-on来监听事件，后面跟上 “:事件名称”决定监听哪个事件，在赋值语句中声明可以带上方法名或内联语句。

它还有一种缩写格式：@

如：

方法名<input type="button" value="验证" v-on:click.stop="Valid" />

内联语句：<input type="button" value="验证" v-on:click.stop="Valid($event)" />

我们在一些时候需要阻止默认事件或停止事件冒泡，这是我们常常会用到event.preventDefault() 或 event.stopPropagation()，Vue帮我们封装了这些方法，只需要在事件名称后面添加.prevnet或.stop即可。

如：   

 <div id="app" v-on:click="FormClick">

        <form>

            <!--

            .stop可以停止事件的冒泡，这样就不会触发Form的FormClick事件了

            -->

            <input type="button" value="验证" v-on:click.stop="Valid" />

            <!--

            .prevent阻止默认行为，表单不会提交了

            -->

            <input type="submit" v-on:click.prevent="Submit" />

        </form>

</div>

在2.1.4版本中还新增了.once修饰符，它表示只触发一次事件处理函数。

在2.3.0中新增了.passive修饰符，它对应addEventListener中的passive选项，能够提高移动端的性能。它表示事件处理函数永远不会调用preventDefault()。

可以参考这篇文章：Passive事件监听器

在监听键盘事件时，我们经常要检查常见的键值，一般通过keyCode来判断点击了哪个按钮。Vue中定义了一些常用的按键修饰符如：.enter .tab .esc .space .left .right .delete 等。

 

为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。