10. 事件处理

本节目标：学会用 v-on 监听事件，掌握内联和方法两种处理器，熟练使用事件修饰符和按键修饰符。

监听事件

用 v-on 指令（简写 @）监听 DOM 事件：

<button @click="handler">点击</button>

处理器可以是两种类型：

内联处理器：事件触发时执行的 JavaScript 代码
方法处理器：组件上定义的方法名

内联处理器

简单场景用内联：

<button @click="count++">加 1</button>
<p>Count is: {{ count }}</p>

内联处理器里也能调用方法，还能传自定义参数：

<button @click="say('hello')">说你好</button>
<button @click="say('bye')">说再见</button>

function say(message) {
  alert(message)
}

需要访问原始 DOM 事件时，用 $event 变量或箭头函数：

<button @click="warn('还不能提交', $event)">提交</button>

<button @click="(event) => warn('还不能提交', event)">提交</button>

方法处理器

逻辑复杂时用方法：

<button @click="greet">打招呼</button>

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  if (event) {
    alert(event.target.tagName)
  }
}

方法处理器自动接收原生 DOM Event 对象，可以通过 event.target 访问触发元素。

Note

模板编译器通过检查 v-on 的值是不是合法标识符来区分内联和方法。foo、foo.bar 是方法，foo()、count++ 是内联。

事件修饰符

经常要在事件处理器里调 event.preventDefault() 或 event.stopPropagation()。虽然方法里也能做，但 Vue 提供了更优雅的方式——事件修饰符：

<!-- 阻止冒泡 -->
<a @click.stop="doThis"></a>

<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>

<!-- 可以链式调用 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只写修饰符 -->
<form @submit.prevent></form>

<!-- 只在事件目标是自身时触发 -->
<div @click.self="doThat">...</div>

修饰符	作用
`.stop`	阻止冒泡
`.prevent`	阻止默认行为
`.self`	只在自身触发
`.capture`	捕获模式
`.once`	只触发一次
`.passive`	被动模式

Tip

修饰符有顺序。@click.prevent.self 阻止自身和子元素的点击默认行为，@click.self.prevent 只阻止自身的。

还有几个对应原生 addEventListener 选项的修饰符：

<!-- 捕获模式 -->
<div @click.capture="doThis">...</div>

<!-- 最多触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动立即执行，不等 onScroll 完成 -->
<div @scroll.passive="onScroll">...</div>

Warning

别同时用 .passive 和 .prevent，.passive 已经告诉浏览器不会阻止默认行为。

按键修饰符

监听键盘事件时，Vue 提供了常用按键的别名：

<!-- 只在按 Enter 时调用 -->
<input @keyup.enter="submit" />

别名	对应按键
`.enter`	Enter
`.tab`	Tab
`.delete`	Delete / Backspace
`.esc`	Escape
`.space`	空格
`.up`	上箭头
`.down`	下箭头
`.left`	左箭头
`.right`	右箭头

也能直接用 KeyboardEvent.key 的值转 kebab-case：

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

系统修饰键

用这些修饰键配合鼠标/键盘事件：

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">做点什么</div>

修饰键	说明
`.ctrl`	Ctrl
`.alt`	Alt
`.shift`	Shift
`.meta`	Mac 是 Command，Windows 是 Win

Note

keyup.ctrl 只在按住 Ctrl 时释放其他键才触发。单独释放 Ctrl 不触发。

.exact 修饰符

控制精确的系统修饰键组合：

<!-- 即使也按了 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

限制只在特定鼠标按钮触发。

本节回顾

@ 是 v-on 的简写
内联处理器适合简单操作，方法处理器适合复杂逻辑
事件修饰符 .stop、.prevent、.self 等处理 DOM 事件细节
按键修饰符 .enter、.ctrl 等简化键盘事件
修饰符可以链式调用，注意顺序