vue-java-tutorials/vue2-tutorials/import-script/7-键盘事件.md

# Vue2 键盘事件处理文档

## 一、基本概念

Vue2 提供了对键盘事件的支持，允许开发者监听特定的按键操作。本示例展示了如何自定义键盘事件别名并处理回车键事件。

## 二、代码示例解析

```html
<div id="app">
    键盘事件：<input type="text" @keydown.huiche="showinfo">
</div>

<script>
    // 自定义按键别名
    Vue.config.keyCodes.huiche = 13;  // 13是回车键的keyCode

    new Vue({
        el: "#app",
        methods: {
            showinfo() {
                alert("回车键被按下");
            }
        }
    });
</script>
```

## 三、核心机制说明

### 1. 键盘事件绑定语法

| 语法形式   | 示例                        | 说明               |
| ---------- | --------------------------- | ------------------ |
| 基础写法   | `@keydown="handler"`        | 监听所有按键       |
| 按键修饰符 | `@keydown.enter="handler"`  | 仅监听回车键       |
| 自定义别名 | `@keydown.huiche="handler"` | 使用自定义按键别名 |

### 2. 按键修饰符类型

Vue 提供了这些常用内置按键别名：
- `.enter`
- `.tab`
- `.delete` (捕获"删除"和"退格"键)
- `.esc`
- `.space`
- `.up`
- `.down`
- `.left`
- `.right`

### 3. 自定义按键别名

通过 `Vue.config.keyCodes` 对象添加：
```javascript
// 语法
Vue.config.keyCodes.自定义名称 = 按键keyCode;

// 示例：将F1键(112)别名为help
Vue.config.keyCodes.help = 112;
```

## 四、键盘事件对象

在方法中可以访问原生事件对象：
```javascript
methods: {
    showinfo(event) {
        console.log(event.key);      // 按键名称（如'Enter'）
        console.log(event.keyCode); // 按键代码（如13）
        console.log(event.target);  // 触发事件的元素
    }
}
```

## 五、最佳实践建议

1. **优先使用内置别名**：
   - 提高代码可读性
   - 避免记忆keyCode数字

2. **复杂按键组合**：
   ```html
   <!-- Ctrl + Enter -->
   <input @keydown.ctrl.enter="submit">
   
   <!-- Alt + C -->
   <input @keydown.alt.67="copy">
   ```

3. **系统修饰键**：
   - `.ctrl`
   - `.alt`
   - `.shift`
   - `.meta` (Mac是Command键，Windows是Windows键)

## 六、扩展应用

### 1. 自动聚焦示例
```html
<input @keyup.enter="nextInput" ref="currentInput">

methods: {
    nextInput() {
        this.$refs.nextInput.focus();
    }
}
```

### 2. 表单提交优化
```html
<form @submit.prevent>
    <input @keyup.enter="submit">
    <button @click="submit">提交</button>
</form>
```

### 3. 游戏控制示例
```javascript
// 监听方向键控制游戏角色
created() {
    window.addEventListener('keyup', this.handleKeyup);
},
methods: {
    handleKeyup(e) {
        switch(e.keyCode) {
            case 37: this.moveLeft(); break;
            case 38: this.moveUp(); break;
            // ...
        }
    }
}
```

## 七、注意事项

1. **keyCode已废弃**：
   - 现代浏览器建议使用 `event.key` 代替
   - Vue3 已移除对keyCode的支持

2. **输入法问题**：
   - 某些输入法下可能无法正确触发事件
   - 中文输入时考虑使用 `@keyup` 代替 `@keydown`

3. **移动端适配**：
   - 虚拟键盘行为可能不一致
   - 建议配合触摸事件使用

4. **事件冒泡**：
   - 使用 `.stop` 修饰符阻止冒泡
   ```html
   <div @keydown.enter.stop="handleEnter">
   ```