Vue | 09 事件处理

内容提要：

1. 事件监听、方法事件的处理、内联方法处理
2. 事件修饰符、键修饰符、系统修饰符键（.exact修饰符、鼠标事件修饰符）
3. 在HTML中监听事件的好处

监听事件

当事件被触发的时候我们可以使用v-on指令去监听DOM事件和运行一些JavaScript。

例如：

<div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>我点击了 {{ counter }}次</p>
</div>

var example1 = new Vue({
    el: '#example-1',
    data: {
        counter: 0
    }
})

Result:
初始界面：

点击一次按钮后：

方法事件管理者

事件管理的逻辑比较复杂，因此将JavaScript的代码写在v-on: 属性的值中并不合适。这就是为什么v-on也能够接受你想要调用的方法的方法名。

例如：

<div id="example-2">
    <!-- 'greet' is the name of a method defined below  -->
    <button v-on:click="greet">Greet</button>
</div>

var example = new Vue({
    el: '#example-2',
    data:{
      name: 'Vue.js'
    },
    methods: {
        greet: function(event) {
            // 'this' inside methods points to the Vue instance
            alert('Hello ' + this.name + '!')
        }
        // 'event' is the native DOM event
        if(event){
            alert(event.target.tagName)
        }
    }
})

// you can invoke method in Javascript too.
example.greet() // => 'Hello Vue.js !'

Resut:

内联处理器中的方法

替代使用方法名，我么也可以内联声明JavaScript来使用方法。

<div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>

var example3 = new Vue({
    el: '#example-3',
    methods:{
    	 say: function (message) {
    		alert(message)
    	 }
	}
})

Result：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
    Submit
</button>

// ...
methods: {
    warn: function(message, event){
        if(event) event.preventDefault()
        alert(message)
    }
}

事件修饰符

在事件处理程序中调用event.preventDefault() 或 event.stopPropagation()是非常常见的需要。虽然我们可以很容易的在方法内做到这一点，如果可以在方法内处理纯数据逻辑而不是处理DOM事件的细节就更好了。

为了处理这个问题，Vue为v-on提供了事件修饰符。之前提过，修饰符是通过点加指令后缀表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!--  阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件将不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以被链接 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 当添加一个事件监听器的时候使用捕获模式 -->
<!-- 也就是一个事件由元素本身先处理，然后再交给元素内部的元素处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只有当event.target是元素本身时触发处理函数 -->
<!-- 也就是事件处理不来自子元素 -->
<div v-on:click.self="doThat">...<div>

当使用修饰符的时候顺序很重要，因为相关的代码按相同的顺序生成。因此使用v-on:click.prevent.self将阻止所有的点击而使用v-on:click.self.prevent将仅仅阻止点击元素本身。

New in 2.1.4+

<!-- 点击事件最多被触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它修饰符，只适用于原生DOM事件，.once修饰符能被用于 component events。

New in 2.3.0+

Vue也提供了.passive修饰符，和addEventListener的passive操作符一致。

<!-- 滚动事件的默认行为将立即发生 -->
<!-- 而不会等待‘onScroll’完成 -->
<!-- 包括‘event.preventDefault()的情况’ -->
<div v-on:scroll.passive="onScroll">...</div>

.passive修饰符对于提高移动设备的性能尤其是有用的。

.passive 和.prevent不要一起使用，因为.prevent将会被忽略，你的浏览器可能会出现警告，记住.passive告诉浏览器你不想阻止事件的默认行为。

Key 修饰符

当监听键盘事件的时候，我们常常需要去检查键的编码。当监听键盘事件的时候Vue也允许你增加key修饰符为v-on。

<!-- 当按键盘编码为13的时候只调用‘vm.submit()’ -->
<input v-on:keyup.13="submit">

记住所有的键盘编码是麻烦的，所以Vue提供了为最常用的键提供了别名。

<!-- same as above -->
<input v-on:keyup.enter="submit">

<!-- also works for shorthand -->
<input @keyup.enter="submit">

这里有完整的键列表修饰符的别名：

• .enter
• .tab
• .delete("Delete"和"空格"键都会被捕获)
• .esc
• .space
• .up
• .down
• .left
• .right

你也能define custom key modifier aliases 通过全局config.keyCodes对象：

// enable 'v-on:keyup.f1'
Vue.config.keyCodes.f1 = 112

自动键盘修饰符

New in 2.5.0+

你也能直接用任何被KeyboardEvent.key公示的键名通过kebab-case转化它们作为修饰符：

<input @keyup.page-down="onPageDown">

在上面的例子中，处理函数仅在$event.key === 'PageDown'时调用。

一些键（.esc和所以的箭头键）键值在IE9是不一致的，如果需要支持IE9应该首先他们的内置别名。

系统修饰符键

New in 2.1.0+

仅仅当和所按下修饰符按键一致时你能够使用以下修饰符去触发鼠标或键盘事件的监听者：

• .ctrl
• .alt
• .shift
• meta

注意：对于Macintosh 键盘，meta是command 键。在Windows键盘，meta是windows 键。

例如：

<!-- Alt + C -->
<input @keyup.alt.67 ="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

注意：当使用keyup事件的时候，修饰符键和常规键是不同的，当事件发出的时候他们必须被按下。另一方面。keyup.ctrl只有当你按住ctrl键后释放其他键后才会触发事件。如果你只释放了一个ctrl键它不会被触发事件。如果你想要这样的行为，用keyCode：keyup.17代替ctrl.

.exact 修饰符

2.5.0 新增

.exact修饰符允许联合精确的系统控制修饰符去触发一个事件。

<!-- 即使按下Alt或Shift时也会被触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有Ctrl键被按下时触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

2.2.0+ 新增

• .left
• .right
• .middle

这些修饰符限定处理器的事件触发通过特定的鼠标按钮。

为什么在HTML中监听事件

你可能会担忧整个事件监听的实现违反了关注度分类（separation of concerns）的优良传统。放心-由于所有的Vue 管理者的函数和表达式都直接的绑定到管理当前视图的ViewModel，它不会引起任何维护困难。实际上，使用v-on还有一些好处：

1. 通过浏览HTML模板更容易的找到在你的JS代码中管理处理器函数的实现。
2. 由于你不必手动的绑定事件在JS中的监听者，你的ViewModel代码能够集中在纯逻辑上并且与DOM无关。这使它更容易测试。
3. 当一个ViewModel被销毁的时候，所有的事件监听者会被自动删除。你并不需要自己清理它。