「事件」是不需要绑定的，浏览器自带了许多的事件，每个事件都可以去绑定「处理器（处理函数）」。

事件 ==> 用户行为 ==> 触发浏览器的事件 ==> 执行对应的事件处理函数

我们通常通过addEventListener方法去给事件绑定处理函数：

  1. document.addEventListener("click", function () {
  2.   // do...
  3. }, flase);

需要注意的是addEventListener只是「绑定」事件处理函数并不是「执行」！处理函数只会在对应事件触发的时候才会进行执行。
某些情况下，我们需要把处理函数独立出去，并且需要更改this的执行，这是因为事件处理函数的this指向元素本身，也就意味着我们不能使用.call来更改this的指向，因为.call方法会立即执行函数！

  1. // 这会导致 test 立即执行！
  2. document.addEventListener("click", test.call(this), flase);
  1. // 可以利用 .bind 方法放心的去指向 this，因为 bind 不会立即执行
  2. document.addEventListener("click", test.bind(this), flase);

Vue 的事件处理绑定

来到Vue，Vue提供了v-on指令让开发者对元素绑定事件处理函数，例如：

  1. <div v-on:click="methodName"></div>
  2. <!-- 或者使用 @click 对 v-on 进行简写 -->
  3. <div @click="handler"></div>

v-on的值可以是JS表达式：

  1. <button @click="count += 1">Add</button>

不推荐这样做，应该把逻辑放到methods里面处理。

v-on的值还可以是一个方法事件处理器：

  1.  <button @click="onClickAdd">Add</button>

@click接受一个方法名或对某个方法的调用。

当通过方法名去绑定事件处理函数的时候，我们可以给方法传递参数：

  1. <div>
  2.   <h1>{{ count }}</h1>
  3.   <button @click="onClickAdd(2)">Add</button>
  4.   <button @click="onClickMinus(2, $event)">Minus</button>
  5. </div>

以上代码，button在绑定了onClickAdd和onClickMinus处理函数后不会立即执行，而是当事件触发后才执行，这会开头我们说的addEventListener是一样的！
而onClickAdd和onClickMinus的括号是为了方便我们传递想要参数方便在methdos里进行处理。

这里有一个特殊的参数$event，该属性是Vue内部封装的一个属性，表示触发事件的事件对象。

  1. const app = {
  2.   template: `<button @click="onClickMinus(2, $event)">Minus</button>`,
  3.   data(){
  4.     return {
  5.       count: 0
  6.     }
  7.   }
  8.   methods:{
  9.     onClickMinus(num, e){
  10.       console.log(e);
  11.       this.count += num;
  12.     }
  13.   }
  14. }

v-on指令还可以同时绑定多个事件处理函数，例如：

  1. <div>
  2.   <h1>{{ count }}</h1>
  3.   <button @click="onClickAdd(),setLog()">Add</button>
  4.   <button @click="onClickMinus">Minus</button>
  5. </div>

只要在两个方法的中间用,分隔就可以同时绑定两个事件处理函数啦。

事件修饰符

我们在在处理事件时可能会调用event.preventDefault()或event.stopPropagation()是很常见的。Vue提供了一套「修饰符」来帮助我们完成这些事件，这么做的目的是让开发者更专注于数据逻辑而不用去处理DOM事件的细节。

修饰符是用 . 表示的指令后缀，包含以下这些：

  • .stop：阻止事件冒泡。
  • .prevent：阻止事件的默认行为。
  • .self：当event.target是元素本身时才会触发事件处理器 。
  • .capture：采用事件捕获。
  • .once：事件调用一次后，自动移除监听器。
  • .passive：修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。 :::warning ⚠️ 注意
    不能同时使用.passive和.prevent，因为.passive已经向浏览器表明了你不想阻止事件的默认行为。
    如果你这么做了，则.prevent会被忽略，并且浏览器会抛出警告。 ::: ```html

…

  1. :::info
  2. 使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用`@click.prevent.self`会阻止元素及其子元素的所有点击事件的默认行为，而`@click.self.prevent`则只会阻止对元素本身的点击事件的默认行为。
  3. :::
  5. <a name="T7RNd"></a>
  6. ## 按键修饰符
  7.  我们通过可能还需要通过`event.keycode`来判断用户触发的按键，`Vue`允许在`v-on`或`@`监听按键事件时添加按键修饰符，例如：
  8. ```html
  9. <!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
  10. <input @keyup.enter="submit" />

你可以直接使用KeyboardEvent.key暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。
Key Values - Web API 接口参考 | MDN

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

Vue为一些常用的按键提供了别名：

  • .enter
  • .tab
  • .delete (捕获“Delete”和“Backspace”两个按键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

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

例如：

  1. <!-- Alt + Enter -->
  2. <input @keyup.alt.enter="clear" />
  4. <!-- Ctrl + 点击 -->
  5. <div @click.ctrl="doSomething">Do something</div>

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

.exact修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。

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

你可以使用以下鼠标按键修饰符来触发鼠标事件监听器：

  • .left
  • .right
  • .middle

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

Vue 为什么会在 HTML 中监听事件？

我们发现Vue是在template中直接绑定事件的，这违背了「关注点分离」的概念。但是不用担心，Vue把事件处理方法和表达式都严格的绑定到当前视图的ViewModel上，他不会导致任何维护上的困难。
当我们使用v-on在视图上绑定事件处理，有几个好处：
1、扫一眼HTML模版便能轻松定位JavaScript里面对应的方法。
2、无须在JavaScript里手动绑定事件，你的ViewModel代码可以是非纯粹的逻辑，和DOM完全解藕，更容易测试。
3、当一个ViewModel销毁的时候，所有的事件处理器都会自动被删除。你需要担心如何清理它们。