Vue2中事件处理

目录

一、事件绑定及传参

二、事件修饰符

三、按键修饰符

四、系统修饰键

---

一、事件绑定及传参

使用v-on指令绑定事件，简写@；除了点击事件click，其它事件也可以实现，例如@dblclick @blur @scroll @focus @change @input等等；

1、直接把 JavaScript 代码写在 v-on 指令中（js表达式），如以下代码中的count + 1。

2、v-on 还可以接收一个需要调用的方法名称，如以下代码中的test1和test2。

调用方法是可传参可不传，如果传参需要加小括号（），这里有一个事件参数$event，不传参的情况下，方法可以默认获取到$event，如果传参需要显示的写上这个传参，代码如下。

<div class="home">
  <button v-on:click="count += 1">点我加1</button>{{ count }}
  <button v-on:click="test1">按钮1</button>
  <button v-on:click="test2('123', $event)">按钮2</button>
</div>
// ---------------------------------------------------------
a () {
  return {
    count: 0,
  }
},
methods: {
  test1 (e) { // 调用方法不传参的情况，默认能接收到$event
    console.log(e)
  },
  test2 (x, e) { // 调用方法传参的情况，需要在模板中，显示的传$event参数才能接收到$event
    console.log(x, e)
  }
},

二、事件修饰符

为了对时间进行特殊化处理，vue提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

多个修饰符可以连用，顺序很重要，相应的代码会以同样的顺序产生。比如用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<!-- 阻止单击事件继续传播（包括冒泡和捕获） -->
<a v-on:click.stop="doSomething"></a>

<!-- 阻止默认行为 -->
<a v-on:click.prevent="doSomething" href="https://www.baidu.com/">阻止默认行为</a>

<!-- 开启捕获模式 -->
<div v-on:click.capture="doSomething">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div v-on:click.self="doSomething">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doSomething"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成，这其中包含 `event.preventDefault()` 的情况 -->
<!-- 可提高滚动性能，解决滚动卡顿问题 -->
<div v-on:scroll.passive="onScroll">...</div>

三、按键修饰符

常见的键盘事件有：keyup  keypress  keydown 

v-on 在监听键盘事件时，添加了按键修饰符：

<!-- 只有在 key 是 `Enter/ArrowUp/ArrowDownp/Tab...` 时调用 `submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.up="submit">
<input v-on:keyup.down="submit">
<input v-on:keyup.tab="submit">

如果KeyboardEvent.key 暴露的按键名是多个单词组成的大驼峰式，需转换为 kebab-case 来作为修饰符。

<!-- 只有在 key 是`PageDown` 时调用 `onPageDown()方法` -->

<input v-on:keyup.page-down="onPageDown">

vue提供的内置按键码：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

四、系统修饰键

1、vue提供的系统修饰符如下，来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

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

注：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

系统修饰键与常规按键不同，如下代码中，在和 keydown事件一起用时，只有在按住 alt的情况下释放enter，才能触发 keydown.ctrl。而单单释放 ctrl 也不会触发事件。

如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

<!-- Alt + Enter  按住Alt键不放手，然后按下enter，才会触发键盘事件，此事件对应enter的事件-->  
<input v-on:keydown.ctrl.enter="clear">

<!-- Ctrl + Click 按住ctrl键不放手，然后点击，才会触发点击事件doSomething-->
<div v-on:click.ctrl="doSomething">Do something</div>

2、.exact修饰符

精确控制系统修饰符触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

 3、鼠标按键修饰符

• .left
• .right
• .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。