Js查漏补缺-11

0x00 键盘事件

    常用的键盘事件有三个分别为onkeyup onkeydown onkeypress

   

  <script>
    document.addEventListener('keyup',() => {
        console.log(1); // 键盘弹起时触发
    })
    document.addEventListener('keydown',() => {
        console.log(2); // 键盘按下时触发，识别所有按键
    })
    document.addEventListener('keypress',() => {
        console.log(3); // 键盘按下时触发，不识别功能键
    })
  </script>

    另外当keydown和keypress同时存在时，首先执行keydown，然后执行keypress

0x01 键盘事件对象

   

  <script>
    document.addEventListener('keyup',(e) => {
        console.log('keyup:' + e.key); // key兼容性警告
        console.log('keyup:' + e.keyCode); // 按键的ascii码，不区分大小写
    })
    document.addEventListener('keydown',(e) => {
        console.log('keydown:' + e.keyCode); // 不区分大小写
    })
    document.addEventListener('keypress',(e) => {
        console.log('keypress:' + e.keyCode); // 区分大小写,需要区分大小写请使用keypress
    })
  </script>

      随手写的一个不用鼠标点击就能输入搜索的js

  <input tpye="text",name="search",value="Search">
  <script>
    let search = document.querySelector('input');
    document.addEventListener('keydown',(e) => {
        if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 97 && e.keyCode <= 122)){
            search.focus();
        }
        console.log(e.keyCode);
    })
  </script>

     顺便一提，keydown和keypress作用于input时，是文字还没输入input框时就触发，触发完后文字才输入input

0x02 BOM中的window对象

    window对象是浏览器的顶级对象，它包含了dom等对象

    window对象是js访问浏览器窗口的一个接口；且window对象是一个全局变量，定义在全局作用域的属性和方法全部都包含在window对象中。

    onload事件在所有资源全部加载完后再执行

<script>
    window.addEventListener('load',() => {
      alert('1');
})

    DOMContentLoaded事件在DOM加载完成后执行，不加载图片，样式，flash等资源

<script>
    window.addEventListener('DOMContentLoaded',() => {
      alert('1');
})
</script>

    onresize事件在浏览器的窗口发生改变时就触发

window.addEventListener('resize',() => {
    console.log('change');
})

    window定时器-setTimeout

    setTimeout(() => {
        console.log('时间到了');
    },5000); // 时间参数可以省略，默认为0

    callback = () => {
        console.log('时间到了2');
    }
    setTimeout(callback,5000); // 也可以这么使用

    清除定时器-clearTimeout()；

  <button>停止</button>
  <script>
    let time1 = setTimeout(() => {
        console.log('时间到了');
    },5000); // 时间参数可以省略，默认为0
    let btn = document.querySelector('button');
    btn.addEventListener('click',() => {
        clearTimeout(time1);
    })
  </script>

    window定时器-setInterval

    let time1 = setInterval(() => {
        console.log('一秒过去了');
    },1000); // 每隔一段时间执行一遍函数