如果阅读有疑问的话，欢迎评论或私信！！

事件处理

前言

我们在模板语法板块中简单介绍过v-on指令的使用方法，我们可以通过v-on绑定一个DOM事件，或者使用@绑定，对于其中的值（也就是事件处理器），我们可以是一个方法。在该章节中，我们会知道绑定事件的详细介绍。

监听事件

事件处理器的值可以是：

1. 内联事件处理器：事件被触发时执行的内联JavaScript语句。也就是不同表达式的代码。
2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径，也就是找包含不同表达式代码的地方在哪里。

内联事件处理器

内联事件处理器通常用于简单场景，例如：

<template><button @click="this.keyTest.unshift({ id: 10, myName: "新的" });">添加</button>
</template><script>data() {var keyTest = [{id: 0,myName: 1,},{id: 1,myName: 2,},{id: 2,myName: 3,},{id: 3,myName: 4,},{id: 4,myName: 5,},];return {keyTest}
}
</script>

方法事件处理器

由于内联事件处理器在面对复杂逻辑时会显得有些冗余，并且不够灵活。所以加入了方法事件处理器,它可以接受一个方法名，用于处理更复杂的事件处理逻辑。例如：

<template><button @click="greet">Test</button>
</template><script>methods: {greet(event) {// `event` 是 DOM 原生事件if (event) {console.log(event);}},}
</script>

在方法事件处理器中，我们可以使用任意变量名表示一个DOM事件参数，推荐使用event表示，增加可读性。其中event是DOM原生事件，并没有被包装，例如可以使用event.target.tagName来获取当前调用DOM的标签名。

方法与内联事件判断

在对vue模板编译时，编译器会检查v-on指令中的值。如果是一个属性访问路径，那么就当作是一个方法事件处理器处理；如果是JavaScript标识符或是一个调用方法，那么就会当作是一个内联事件处理器处理。

在内联处理器中调用方法

在上面我们讲到对一个函数的调用属于内联处理器，其中的参数也不再是方法事件处理器中所将的DOM原生事件，而是自定义参数：

<template><button @click="say('hello')">Say hello</button><button @click="say('bye')">Say bye</button>
</template><script>methods: {say(message) {alert(message)}}
</script>

在内联事件处理器中访问事件参数

我们目前知道方法事件处理器中的参数是DOM原生事件，内联事件处理器是自定义参数，那么除了自定义参数，我们还可以向方法中传递$event变量，表示我们使用DOM原生事件参数，例如：

<template><button @click="greet('123')">Test</button>
</template><script>methods: {greet(customName,$event) {console.log(customName); //123 PointerEvent {isTrusted: true,…}},}
</script>

我们还可以先在内联代码中使用箭头函数将当前原生DOM事件作为参数传入到方法中，例如：

<template><button @click="(event)=>{greet('123',event)}">Test</button>
</template><script>methods: {greet(customName,$event) {console.log(customName); //123 PointerEvent {isTrusted: true,…}},}
</script>

修饰符

Vue为我们提供了许多便捷修饰符，使我们的代码更简洁。提供修饰符的目的是使我们的代码能更注重其中的逻辑性，而不会被一些细节问题打乱。修饰符使用.后缀使用，和v-on指令一起使用。

事件修饰符

• .stop 阻止元素向上冒泡
• .prevent 清除DOM默认行为
• .self 等同于先进行event.target === this判断，如果是自身才触发，是为了防止冒泡引起问题。
• .capture 在多层DOM嵌套中，触发内部元素，会引起外部元素的相应事件，而capture可以使当前DOM优先处理。
• .once 事件最多被触发一次
• .passive 与prevent相对，可以说是防止清除DOM默认行为。

按键修饰符

Vue同时为我们提供了按键修饰符，可以使用KeyboardEvent键盘事件加.后缀使用。例如：

<template><input type="text" @keyup.a="console.log('a')">
</template>

在输入时，如果发生a键松开时，触发监听事件。

在修饰符命名中，我们使用的是-分隔符，而不是驼峰命名。例如：

<template><input type="text" @keyup.page-down="console.log('pageDown')">
</template>

常规按键别名

• .enter 回车键
• .tab 换行键
• .delete (捕获“Delete”和“Backspace”两个按键)
• .esc 退出键
• .space 空格
• .up ↑键
• .down ↓键
• .left ←键
• .right →键

系统按键别名

• .ctrl
• .alt
• .shift
• .meta 在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。

组合按键

当常规+常规组合监听时，效果是两个键每一个都可以触发一次监听事件。例如：

<template><input type="text" @keyup.1.a="console.log('a || 1')">
</template>

当常规+系统组合监听时，效果是两个键同时按下时触发一次监听事件。

<template><input type="text" @keyup.ctrl.a="console.log('ctrl && a')">
</template>

请注意，系统按键修饰符和常规按键不同。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。换句话说，keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。

exact 修饰符

exact翻译为准确的，是为了我们可以准确的使用键盘事件。该修饰符只能用于常规+系统组合。例如：

<!-- 当按下 Ctrl 点击按钮时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符

• .left
• .right
• .middle

这些修饰符将处理程序限定为由特定鼠标按键触发的事件。