前置知识

关于【事件】这个概念

1. 一般我们所说的事件处理函数的绑定指的是原生 js 的绑定事件处理函数。

2. 事件本身是不需要绑定的，因为浏览器自身自带了许多的事件！

3. 每个事件可以去绑定处理器（事件处理函数）

4. 事件处理的过程是这样的：

   1. 自带了事件，需要绑定事件处理函数（事件 -> 处理函数 -> 进行绑定行为）
   2. 用户行为触发（事件触发 -> 执行绑定的事件处理函数）
   3. 执行事件处理函数

DOM4 的事件修饰符

1. 前言

• 在学习Vue的修饰符前, 我们需要先了解DOM4新增的修饰符

2. addEventListener

• 在 DOM3 中，addEventListener的基本语法为

addEventListener<T extends Function>(eventType: string, fn: T, isCapture: boolean);

• 在 DOM4 中, addEventListener的第三个参数可以为一个配置项(AddEventListenerOptions)

3. AddEventListenerOptions中的配置

配置名称（optionName）	配置默认值（defaultValue）	配置描述 （optionDescription）
once	false	默认为false；当 once 为 true 时 只调用一次事件处理函数 (相当于移除事件监听器, 通过 cancelable 判断并控制)
passive	false	在浏览器模式下, passive标准的默认值为false (passive为true时, 不调用e.preventDefault, 可以使用e.defaultPrevented判断passive, e.returnValue = true)；passive的使用场景: 在移动端中提升移动端滚动的性能
cancelable	false	事件是否能被取消: e.cancelable (true -> 能够被取消; false -> 不能被取消)

4. 使用 passive 提升 touchstart 的滚动性能

• touchstart 的默认行为: 滚动
• 事件处理器的运行顺序：
  1. 执行处理器程序
  2. 执行默认行为 （会等待处理器程序 -> 存在性能问题 (wating time, wasted), 导致scroll的卡顿）
• passive 设置为 true 的作用
  1. 阻止e.preventDefault的调用
  2. 切分成2个线程处理滚动的问题 (不需要等待处理器程序执行, 去除等待时的卡顿, 提高滚屏性能)
     1. 处理器程序的执行
     2. 执行默认行为

Vue 的事件处理函数绑定的基本方式

特点：

• 与原生 js 相比(DOM0): vue 内部绑定事件处理函数，需要去掉 "on"

绑定方式：

1. 内联式绑定 (不推荐)

<button @click="count += 1">press me: {{ count }} times</button>

2. 方法式绑定 (推荐)

<template>
  <button @click="addCount(1)">press me: {{ count }} times</button>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    addCount(count) {
      this.count += count;
    }
  },
};
</script>

Vue事件处理函数模板传参

绑定事件处理函数传参注意:

• 调用: 这里不会执行 methods 里对应的方法, 调用的目的是传入实参 (addCountValue(1)、subCountValue(1))
• 和原生js不同, Vue不会解析method(1, 2, 3), method(1, 2, 3)只是传入执行的参数传参解释传参解释

传参解释：

在 Vue 的模板编译中, @xxx或者@xxx()都是会返回一个函数

• compile @xxx 👉 function xxx() {}
• compile @xxx() 👉 function () { xxx($event, arguments) }

$event

• Vue封装的事件变量(类似于事件原对象event)，变量名不可变, 可以 @xxx($event)

绑定多个事件处理函数

• @xxx可以绑定多个事件处理函数，使用 ,隔开即可 ( @click="xxx($event), aaa($event, a)" )

Vue 中的事件修饰符

1. 概述

在Vue模板中, 使用@(v-on:click)绑定的事件可以使用事件修饰符, 把事件处理函数中非纯逻辑的程序分离

尽管我们可以直接在方法内调用， 但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

2. 常见的事件修饰符

事件修饰符	修饰符描述	类比原生 DOM
.prevent	事件处理函数内部	Event.preventDefault()
.once	只触发一次事件处理函数	({ once })
stop	阻止事件处理函数冒泡	stopPropagation / cancelBubble
.capture	是否需要事件捕获	({ capture })
.self	跳过非事件源的事件触发 (仅当 event.target 是元素本身时才会触发事件处理器)
.passive	不调用event.preventDefault

3. 键盘按键修饰符

键盘按键修饰符的使用方式：

• 在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符；你可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。
• 常用键盘按键 (enter, delete left, right, ...)
• 不常用键盘按键 (kebab-case)

4. 事件修饰符使用注意点

• .prevent、.passive不建议链式调用 （参考原生报错）
• 修饰符可以使用链式书写; 连用的情况, 一定要注意顺序问题

5. Vue对于模板事件的观点

• 对于 html 来讲: (onclick="onBtnClick") 是不好的

• 但是 Vue 认为：

  1. 逻辑和视图需要分离, 但是模板上的事件并不是之间绑定的
  2. 从template中能够直接定位到script上面的事件处理函数, 使开发者能更加注重业务本身的内容