1、submit() 为登录事件,@keydown.enter="keyDown()"为用户按下enter键触发的事件
<el-button @click="submit()" @keydown.enter="keyDown()">登录</el-button>
2、keyDown()
//点击回车键登录
const keyDown = (e) => {
if (e.keyCode == 13 || e.keyCode == 100) {
submit()
}
}
3、在onMounted()绑定监听事件
onMounted(() => {
//绑定监听事件
window.addEventListener('keydown', keyDown)
});
4、在onUnmounted()绑定销毁事件
onUnmounted(() => {
//销毁事件
window.removeEventListener('keydown', keyDown, false)
});
补充知识:
1、addEventListener() 和removeEventListener()
addEventListener() 方法用于向指定元素添加监听事件。同一元素目标可重复添加,不会覆盖之前相同事件,配合 removeEventListener() 方法来移除事件。
target.addEventListener(event, function, useCapture)
- target文档节点、document、window 或 XMLHttpRequest。
- event字符串,事件名称,不用带 "on" 前缀,比如“click”、“keydown”等。
- function实现了 EventListener 接口或者是 JavaScript 中的函数。当目标对象事件触发时,会传入一个事件参数,参数名称可自定义,如填写event,不需要也可不填写。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
- useCapture是否使用捕捉(触发类型),布尔型,可空,true - 事件在捕获阶段执行 ,false - 事件在冒泡阶段执行,默认是false。
target.removeEventListener(event, function, useCapture)
- target文档节点、document、window 或 XMLHttpRequest。
- event字符串,必须。要移除的事件名称,不用带 "on" 前缀,比如“click”、“mouseover”、“keydown”等。
- function必须。指定要移除的函数。。
- useCapture可选。布尔值,指定移除事件句柄的阶段。true - 在捕获阶段移除事件句柄,false- 默认。在冒泡阶段移除事件句柄,如果添加两次事件句柄,一次在捕获阶段,一次在冒泡阶段,你必须单独移除该事件。
2、键盘事件
- keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件。
- keyup:当用户释放键盘上的按键时触发。