键盘事件&BOM

键盘事件

常用的三个

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

注意：

1. 如果使用addEventListener不需要加on

2. onkeypress和前面的两个事件区别在于它不识别功能键

3. 三个时间的触发顺序是：keydown–keypress–keyup

       <script>
           // 常用的键盘事件
           //1. keyup 按键弹起的时候触发 
           document.addEventListener('keyup', function() {
        
               console.log('我弹起了');
           })
   
           //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
           document.addEventListener('keypress', function() {
        
                   console.log('我按下了press');
           })
           //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
           document.addEventListener('keydown', function() {
        
                   console.log('我按下了down');
           })
           // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
       </script>
   
   

键盘事件对象

属性

KeyCode：返回该键的ASCII码值

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

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

    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
   
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
   
                alert('您按下的a键');
            } else {
   
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
   
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    </script>

事件冒泡和默认事件

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

案例

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

       <input typ