键盘事件及小知识

最新推荐文章于 2023-02-11 10:32:40 发布

原创最新推荐文章于 2023-02-11 10:32:40 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

#JavaScript 专栏收录该内容

36 篇文章

订阅专栏

本文详细解读了HTML、JavaScript中onkeyup、onkeydown、onkeypress的用法，并介绍了如何利用ES6解构处理键盘事件，以及事件冒泡与取消冒泡的基本概念。重点讲解了如何针对特定按键触发方法，如回车键13的应用。

部署运行你感兴趣的模型镜像

键盘事件：（一般用于表单和全局）

onkeyup： 当键盘在某个HTML元素上弹起的时候触发（优先使用up）。

onkeydown：当键盘在某个HTML元素上按下的时候触发（如果按下不放手，会一直触发）。

onkeypress ： 键盘按下（只支持字符键）只产生字符后才触发。

document.onkeyup = function(){
    console.log("我是按下弹起触发的");
}
document.onkeydown = function(){
    console.log("我是按下不松手一直触发的");
}
document.onkeypress = function(){
    console.log("我只支持字符集，其他功能键我不管");
}

针对某个键盘按下触发事件。

document.querySelector("#id").onkeyup = function(e){
if(e.keyCode === 13){
    方法()
    }
}

ES6解构：想要从对象当中取值就可以使用。

let {clientX,clientY} = event;
console.log(clientX, clientY);

监听事件绑定：捕获行为是从外到内，事件冒泡是由内到外。

取消冒泡(阻止事件传播)： e.stopPropagation();

您可能感兴趣的与本文相关的镜像

LobeChat

AI应用

LobeChat 是一个开源、高性能的聊天机器人框架。支持语音合成、多模态和可扩展插件系统。支持一键式免费部署私人ChatGPT/LLM 网络应用程序。