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); // 每隔一段時間執行一遍函數