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() 方法来移除事件。

1)addEventListener() 

target.addEventListener(eventfunctionuseCapture)

  • target文档节点、document、window 或 XMLHttpRequest。
  • event字符串,事件名称,不用带 "on" 前缀,比如“click”、“keydown”等。
  • function实现了 EventListener 接口或者是 JavaScript 中的函数。当目标对象事件触发时,会传入一个事件参数,参数名称可自定义,如填写event,不需要也可不填写。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
  • useCapture是否使用捕捉(触发类型),布尔型,可空,true - 事件在捕获阶段执行 ,false - 事件在冒泡阶段执行,默认是false。

2)removeEventListener:

target.removeEventListener(eventfunctionuseCapture)

  • target文档节点、document、window 或 XMLHttpRequest。
  • event字符串,必须。要移除的事件名称,不用带 "on" 前缀,比如“click”、“mouseover”、“keydown”等。
  • function必须。指定要移除的函数。。
  • useCapture可选。布尔值,指定移除事件句柄的阶段。true - 在捕获阶段移除事件句柄,false- 默认。在冒泡阶段移除事件句柄,如果添加两次事件句柄,一次在捕获阶段,一次在冒泡阶段,你必须单独移除该事件。

2、键盘事件

  • keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件。
  • keyup:当用户释放键盘上的按键时触发。
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐