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

键盘事件

常用的三个

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

注意：

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

键盘事件对象

属性

KeyCode：返回该键的ASCII码值

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

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

事件冒泡和默认事件

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

案例

1. 模仿京东搜索栏按下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();
                   }
               })
           }
       <