监听事件基础

Vue提供了v-on指令（简写为@）来监听DOM事件，并在事件触发时执行相应的JavaScript代码。基本用法有两种形式：

• 完整语法：v-on:click="handler"
• 简写语法：@click="handler"

事件处理器（handler）有两种类型，适用于不同场景：

内联事件处理器

内联事件处理器是指事件触发时直接执行的JavaScript语句，类似于原生HTML中的onclick属性，适合处理简单逻辑。

示例：

 // 定义响应式变量
 const count = ref(0)

 <!-- 点击按钮时直接执行count自增操作 -->
 <button @click="count++">Add 1</button>
 <p>Count is: {{ count }}</p>

这种方式的优势是简洁，无需额外定义方法，适合处理单一、简单的操作。

方法事件处理器

当事件处理逻辑变得复杂时，内联方式就显得不够灵活了。这时可以使用方法事件处理器，将处理逻辑封装在组件的方法中。

示例：

 // 定义响应式变量
 const name = ref('Vue.js')
 
 // 定义事件处理方法
 function greet(event) {
   alert(`Hello ${name.value}!`)
   // event是原生DOM事件对象
   if (event) {
     alert(event.target.tagName) // 输出"BUTTON"
   }
 }

 <!-- 绑定到方法名 -->
 <button @click="greet">Greet</button>

方法事件处理器会自动接收原生DOM事件作为参数，我们可以通过event对象访问DOM元素的相关信息，如event.target指向触发事件的DOM元素。

方法与内联事件的判断

Vue模板编译器会自动判断事件处理器的类型：

• 如果值是合法的JavaScript标识符或属性访问路径（如foo、foo.bar、foo['bar']），会被视为方法事件处理器
• 如果值是表达式（如foo()、count++），会被视为内联事件处理器

在内联处理器中调用方法

除了直接绑定方法名，还可以在内联事件处理器中调用方法，这允许我们传递自定义参数：

示例：

 // 定义带参数的方法
 function say(message) {
   alert(message)
 }

 <!-- 传递不同参数调用同一方法 -->
 <button @click="say('hello')">Say hello</button>
 <button @click="say('bye')">Say bye</button>

在内联事件处理器中访问事件参数

有时需要在内联事件处理器中访问原生DOM事件，可以通过两种方式：

0. 使用特殊的$event变量：

 <button @click="warn('Form cannot be submitted yet.', $event)">
   Submit
 </button>

2. 使用内联箭头函数：

 <button @click="(event) => warn('Form cannot be submitted yet.', event)">
   Submit
 </button>

对应的方法定义：

function warn(message, event) {
  // 访问原生事件
  if (event) {
    event.preventDefault() // 阻止默认行为
  }
  alert(message)
}

事件修饰符

在事件处理中，经常需要调用event.preventDefault()（阻止默认行为）或event.stopPropagation()（阻止事件冒泡）。Vue提供了事件修饰符，让我们可以在模板中直接处理这些DOM细节，使方法更专注于数据逻辑。

事件修饰符是用.表示的指令后缀，常用的有：

• .stop：阻止事件冒泡
• <a @click.stop="doThis"></a>
• 相当于调用event.stopPropagation()，防止事件向上传播到父元素。
• .prevent：阻止默认行为
• <form @submit.prevent="onSubmit"></form>
• 相当于调用event.preventDefault()，如阻止表单提交时的页面刷新。
• .self：仅当事件目标是元素本身时触发
• <div @click.self="doThat">...</div>
• 确保事件不是从子元素冒泡上来的，只有点击元素本身才会触发。
• 修饰符可以链式使用：
• <a @click.stop.prevent="doThat"></a>
• 先阻止冒泡，再阻止默认行为。
• 可以只使用修饰符，不指定处理函数：
• <form @submit.prevent></form>
• 单纯阻止表单的默认提交行为。

注意：修饰符的顺序很重要，@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为，而@click.self.prevent只会阻止元素本身点击事件的默认行为。

其他常用修饰符：

• .capture：使用事件捕获模式
• <div @click.capture="doThis">...</div>
• 事件捕获模式下，外部元素的事件会先于内部元素触发。
• .once：事件只会触发一次
• <a @click.once="doThis"></a>
• 适合处理一次性操作，如按钮点击后失效。
• .passive：优化滚动性能
• <div @scroll.passive="onScroll">...</div>
• 告诉浏览器不会阻止事件的默认行为，主要用于触摸事件和滚动事件，提升移动端性能。

注意：不要同时使用.passive和.prevent，因为.passive已经表明不会阻止默认行为，.prevent会被忽略并导致浏览器警告。

按键修饰符

在监听键盘事件时，常常需要检查特定按键。Vue允许在v-on监听键盘事件时添加按键修饰符，只在特定按键触发时执行处理函数。

基本用法：

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

可以直接使用KeyboardEvent.key的值作为修饰符（需转为kebab-case）：

<!-- 只有按PageDown键时才触发 -->
<input @keyup.page-down="onPageDown" />

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

• .enter：回车键
• .tab：制表键
• .delete：删除键（同时捕获Delete和Backspace）
• .esc：退出键
• .space：空格键
• .up：上方向键
• .down：下方向键
• .left：左方向键
• .right：右方向键

系统按键修饰符

系统按键修饰符用于指定只有在特定系统按键被按下时才触发事件，包括：

• .ctrl
• .alt
• .shift
• .meta（在Mac上是Command键，在Windows上是Windows键）

示例：

<!-- 只有在按下Alt+Enter时才触发 -->
<input @keyup.alt.enter="clear" />

<!-- 只有在按下Ctrl并点击时才触发 -->
<div @click.ctrl="doSomething">Do something</div>

注意：系统按键修饰符与常规按键不同，配合keyup事件使用时，只有在松开其他键而系统按键仍被按住时才会触发。单独松开系统按键不会触发。

.exact修饰符

.exact修饰符用于精确控制触发事件所需的系统修饰符组合：

<!-- 按下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：中间按键（通常是滚轮键）

<!-- 只有左键点击才触发 -->
<button @click.left="doLeftClick">Left Click</button>

<!-- 只有右键点击才触发 -->
<button @click.right="doRightClick">Right Click</button>

注意：这些修饰符是基于按键功能（主、次、辅助）而非物理位置。对于左手鼠标布局，主按键可能是物理右键，但仍会触发.left修饰符。触控板通常单指点击触发.left，双指点击触发.right。