Vue事件修饰符的使用

事件处理

在原生DOM绑定事件的年代，我们经常会使用到e.preventDefault() 或 e.stopPropagation()等操作。
而在vue中为了简化这种常见需求，为v-on提供了一个叫Event Modifiers (事件修饰符)的语法糖。

• .stop 等同于JavaScript中的event.stopPropagation()，阻止事件冒泡
• .prevent 等同于JavaScript中的event.preventDefault()，防止默认行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
• .capture 在捕获阶段触发监听函数，与事件冒泡的方向相反，事件捕获由外到内
• .self 只会触发自己范围内的事件，不包含子元素
• .once 事件将只会触发一次
• .passive 表示 listener 永远不会调用 preventDefault()

事件传播
W3C的DOM标准中，一次事件包含三个步骤：

捕获 -> 到达目标 -> 冒泡

事件捕获是从上到下进行捕获的，而事件冒泡是从下往上进行冒泡的
例如：

<div class="outeer" @click="outer"> 
　	<div class="middle" @click="middle"> 
　　　	<button class="inner"  @click="inner">点击我</button>
 	</div>
</div> 

那么当点击inner的时候事件传播顺序是 outer => middle => inner => inner => middle => outeer

如果要阻止冒泡事件：在点击上加上.stop相当于在每个方法中调用了等同于event.stopPropagation()，点击子节点不会捕获到父节点的事件

事件监听
v-on监听DOM事件，本质上是调用了addEventListener

/**
 * @param type 事件类型，如click
 * @param listener 监听函数
 * @param useCapture 是否采用事件捕获
 */
addEventListener(type, listener, useCapture=false)

默认的v-on:click=""等价于addEventListener(‘click’, listener)。所以一般的v-on监听只在冒泡阶段才触发。若想在捕获阶段触发事件必须加上.capture修饰符。

注意：v-on:click.capture只在捕获阶段触发，不会在冒泡阶段触发。要想两个阶段都触发，只能写两套：

<div  @click.capture="listener" @click="listener"></div>

事件委托
当页面中存在大量元素而且每一个都要一次或多次绑定事件处理器时，大量的事件绑定会影响页面性能。一个简单而有效的技术就是事件委托。它也是基于冒泡机制，只要给父级元素绑定处理器，就可代理子级元素上的所有事件。

<main class="hello">
    Outer
    <section @click.prevent="listener">
      Middle
      <a href="#1">Inner1</a>
      <a href="#2">Inner2</a>
      <a href="#3">Inner3</a>
    </section>
</main>


listener: function (e) {
    console.log(`Get ${e.target.href}`)
}

给<section @click.prevent=“listener”>加上.prevent修饰符阻止a标签的默认跳转行为。当点击a元素时，事件向DOM树上层冒泡，被父元素接受，然后触发listener。这样，仅添加一个listener到父级元素，就可以实现代理了。

.prevent 取消默认事件
.prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。例如我们页面的a标签，from表单等

.self 表示事件由本身触发，不是来自子节点。
顺带提一下，使用修饰符时顺序很重要，在某些场景中:

用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。

.once 只执行一次点击
如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。

键盘修饰符

在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：

• .enter：回车键
• .tab：制表键
• .delete：含delete和backspace键
• .esc：返回键
• .space: 空格键
• .up：向上键
• .down：向下键
• .left：向左键
• .right：向右键

鼠标修饰符

鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：

• .left：鼠标左键
• .middle：鼠标中间滚轮
• .right：鼠标右键

修饰键

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应：

• .ctrl
• .alt
• .shift
• .meta

自定义按键修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名。例如，由于预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法，出现alert。

<div id="app">
    <input type="text" v-on:keydown.f5="prompt()">
</div>

Vue.config.keyCodes.f5 = 116;

let app = new Vue({
    el: '#app',
    methods: {
        prompt: function() {
            alert('我是 F5！');
        }
    }
});