键盘事件监听与修饰符

Tue, 04 Mar 2025 07:00:27 +0000

考察点分析

该题主要考察以下核心能力维度：

具体技术评估点包括：

原生事件监听通过addEventListener绑定，需手动检查键值：

 input.addEventListener('keyup', (e) => {
 if(e.key === 'Enter' || e.keyCode === 13) {
 // 处理逻辑
 }
})

Vue修饰符系统通过编译阶段将@keyup.enter转换为上述判断逻辑，其核心实现：

 function genFilterCode(key) {
 const keyVal = parseInt(key, 10)
 return `if(!$event.${isKeyNotMatch}) return null;`
}

通过Vue.config.keyCodes注册自定义别名时，Vue会在编译阶段将别名转换为对应键值检测逻辑。

对比分析
原生事件需手动校验keyCode/key值，而Vue修饰符通过编译时转换自动处理，提升代码可读性。Vue内部统一处理了浏览器兼容逻辑（如Enter键在IE中keyCode为13）。

自定义别名注册

 // Vue 2.x
Vue.config.keyCodes.customAlias = 65 // 注册字母A

使用@keyup.customAlias即可监听对应按键。