前端学习打卡（4.17-4.24）

<!-- <script>

  //  键盘事件判断

  // 常用键盘事件

    // keycode 得到对象中相应键的ascii码值 没有兼容性问题

    document.addEventListener('keyup',function(e){

      console.log('up'+e.keyCode);//输出相应键的ASCII码值

    })

    //注意 keyup keydown 不区分大小写 都是小写

    //keypress 区分大小写

    document.addEventListener('keyup',function(e){

      console.log('press'+e.keyCode);

    })

</script> -->

<!-- 模拟按键输入案例 -->

<!-- <input type="text">

<script>

  var search = document.querySelector('input');

  document.addEventListener('keyup',function(e) {

    if (e.keyCode === 83) {

      search.focus();

    }//keydown 一按下就出发

    //keyup 弹起才出发

  })

</script> -->

 

  <!-- //bom 浏览器对象模型 -->

   <!-- 作用 与浏览器进行交互 -->

   <!-- bom顶级对象是window

   主要学习浏览器窗口交互的一些对象

   window对象是浏览器顶级对象

     1 它是js访问浏览器窗口的一个接口

     2 它是一个全局对象 定义在全局作用域的变量会变成window对象的属性和

     方法 调用时一般省略window -->

 

   <!-- window 常用事件 -->

         <!-- 1 window.onload = function(){}; 可以将js放到其他位置

         缺点 只能写一次 以最后一个为准

         2 window.addEventListener("load",function(){})

         可以多次写

         3 DOMContentLoaded

        document.addEventListener('DOMContentLoaded',function(){})

        仅当dom加载完成 不包括样式表 图片 flash 等等 ie9以上才支持

    调整窗口事件

    window.addEventListener('resize',function(){});窗口调整事件

    响应式布局 -->