【vue.js】文档解读【day 4】 | 事件处理

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

文章目录

事件处理
- 前言
- 监听事件
- 内联事件处理器
- 方法事件处理器
- 方法与内联事件判断
- 在内联处理器中调用方法
- 在内联事件处理器中访问事件参数
- 修饰符
- - 事件修饰符
  - 按键修饰符
  - 常规按键别名
  - 系统按键别名
  - 组合按键
  - [exact 修饰符](#exact 修饰符)
  - 鼠标按键修饰符

事件处理

前言

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

监听事件

事件处理器的值可以是：

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

内联事件处理器

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

html 复制代码

<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>

方法事件处理器

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

html 复制代码

<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原生事件，而是自定义参数：

html 复制代码

<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原生事件参数，例如：

html 复制代码

<template>
	<button @click="greet('123')">Test</button>
</template>

<script>
	methods: {
  		greet(customName,$event) {
        	console.log(customName); //123 PointerEvent {isTrusted: true,...}
    	},
	}
</script>

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

html 复制代码

<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键盘事件加.后缀使用。例如：

html 复制代码

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

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

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

html 复制代码

<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 键 (⊞)。

组合按键

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

html 复制代码

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

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

html 复制代码

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

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

exact 修饰符

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

html 复制代码

<!-- 当按下 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

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