前端基础 - WebApi （四）键盘事件

最新推荐文章于 2022-10-19 16:09:55 发布

林一。

最新推荐文章于 2022-10-19 16:09:55 发布

阅读量429

点赞数

分类专栏： WebApi 前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48306135/article/details/111660717

版权

本文详细介绍了JavaScript中的键盘事件，包括onkeyup、onkeydown和onkeypress，强调了keydown和keyup在实际开发中的应用。此外，还探讨了键盘事件对象的KeyCode属性以及如何阻止事件冒泡和默认行为。接着，文章转向BOM模块，解释了浏览器对象模型（BOM）的核心——window对象，以及与DOM的区别。最后，列举了window对象的常见事件，如窗口加载、大小改变和定时器事件，以及location对象和history对象的相关属性和方法，展示了BOM在网页交互中的重要作用。

摘要由CSDN通过智能技术生成

键盘事件

常用的三个

onkeyup：当某个按键被松开的时候后触发
onkeydown：当某个按键被按下的时候触发
onkeypress：当某个按键被按下的时候触发，不识别功能按钮(方向键、shift)

注意：

如果使用addEventListener不需要加on
onkeypress和前面的两个事件区别在于它不识别功能键
三个时间的触发顺序是：keydown–keypress–keyup

键盘事件对象

属性

KeyCode：返回该键的ASCII码值

keydown和keyup事件对象是同样的，事件不区分字母大小写(大写)，keypress会区别大小写
在实际开发中，使用更多的是keydown和keyup，能够识别所有按键
keypress识别大小写返回大小写不同的ASCII码

作用：使用keyCode属性判断用户的按键操作

事件冒泡和默认事件

阻止默认事件：e.preventDefault();
阻止事件冒泡：e.stopPropagation();
两个都阻止： return false;(原生JS里面无法阻止事件冒泡)

案例

模仿京东搜索栏按下S键光标进入

    <input type="text">
    <script>
        // 实现思路
        // 检测用户是否按下了S键，如果按下了将光标定位到搜索框里面
        window.onload=function(){
     
            // 【1】先获取搜索框
            var search=document.querySelector("input");
            // 【2】给document添加keyup事件
            document.addEventListener("keyup",function(e){
     
                // 【3】获取并判断按下的键值是不是S
                if(e.keyCode===83){
     
                    // 【4】设置光标到搜索框内部
                    search.focus();
                }
            })
        }
    <