1.0 键盘事件

1.1键盘事件

键盘事件 触发条件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被松开时触发 不识别功能键

注意：

  1. 如果使用addEventListener 不需要加 on
  2. onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
  3. 三个事件的执行顺序是： keydown — keypress —- keyup （按下—按住—抬起）

案例：

  1.    (1)keyup按键弹起事件 可以识别功能键 不区分大小写
  2.     document.addEventListener('keyup',function(){
  3.       console.log('我弹起了')
  4.     })
  6.     (2)keydown按键按下事件 可以识别功能键 不区分大小写
  7.     document.addEventListener('keydown',function(){
  8.       console.log('我按下了')
  9.     })
  11.     (3)keypress按键按下的时候触发 它不识别功能键 但是能识别大小写 比如ctrl shift
  12.     document.addEventListener('keypress',function(){
  13.       console.log('我按下了')
  14.     })
  16.     三个事件的执行顺序：keydown--keypress --keyup

1.2键盘事件对象

键盘事件 说明
keyCode 返回 ASCII码
  • 注意：
  1. onkeydown 和 onkeyup 不区分字母大小写，通过keyCode属性获取到的a 和 A 得到的都是65
  2. onkeypress 区分字母大小写 ，通过keyCode属性获取到的 a 是 97 和 A 得到的是65

判断是否按下

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

模拟京东快递单号

  1.     <div class="search">
  2.         <div class="con">123</div>
  3.         <input type="text" placeholder="请输入您的快递单号" class="jd">
  4.     </div>
  5.     <script>
  6.         // 获取要操作的元素
  7.         var con = document.querySelector('.con');
  8.         var jd_input = document.querySelector('.jd');
  9.         // 给输入框注册keyup事件
  10.         jd_input.addEventListener('keyup', function() { //**如果想监听文本框中输入的内容，只能使用keyup** 
  11.                 // 判断输入框内容是否为空
  12.                 if (this.value == '') {
  13.                     // 为空，隐藏放大提示盒子
  14.                     con.style.display = 'none';
  15.                 } else {
  16.                     // 不为空，显示放大提示盒子，设置盒子的内容
  17.                     con.style.display = 'block';
  18.                     con.innerText = this.value;
  19.                 }
  20.             })
  21.         // 给输入框注册失去焦点事件，隐藏放大提示盒子
  22.         jd_input.addEventListener('blur', function() {
  23.                 con.style.display = 'none';
  24.             })
  25.         // 给输入框注册获得焦点事件
  26.         jd_input.addEventListener('focus', function() {
  27.             // 判断输入框内容是否为空
  28.             if (this.value !== '') {
  29.                 // 不为空则显示提示盒子
  30.                 con.style.display = 'block';
  31.             }
  32.         })
  33.     </script>

2.0 BOM

  • bom顶级对象时window
  • bom包含dom

2.1 页面加载事件（两种）

第一种：

  1. (1)window.onload =function(){}页面加载事件
  2. 注意：只用这个对象可以把js放在页面的任何一个位置  但是传统的注册方式只能注册一个  如果有多个 就以最后一个为准
  4.     window.onload = function(){}
  5.             或者 
  6.     window.addEventListener("load",function(){});

第二种：

  1. (2)addEventListener('DOMContentLoaded',function(){})
  3.     load等页面内容全部加载完毕以后 ，包含页面dom元素 图片 falsh css等等
  4.     DOMContentLoaded 是DOM加载完毕以后 不包含图片 falsh css等就可以执行 加载速度比load更快一些

2.2 整窗口大小事件

语法：

  1. Window.addEventListener('resize',function(){});
  3. Window.innerWidth  获得当前屏幕的宽度  窗口大小发生变化就会触发

案例：

  1.     <script>
  2.         // 注册页面加载事件
  3.         window.addEventListener('load', function() {
  4.             var div = document.querySelector('div');
  5.             // 注册调整窗口大小事件
  6.             window.addEventListener('resize', function() {
  7.                 // window.innerWidth 获取窗口大小
  8.                 console.log('变化了');
  9.                 if (window.innerWidth <= 800) {
  10.                     div.style.display = 'none';
  11.                 } else {
  12.                     div.style.display = 'block';
  13.                 }
  14.             })
  15.         })
  16.     </script>
  17.     <div></div>

2.3 定时器 (两种)

  • setTimeOut 执行一次 执行完毕就结束了

第一种

setTimeout() 炸弹定时器

  1.  window.setTimeout(回调函数, [延迟的毫秒数]);
  2.  第一个参数是到达一定时间执行的参数 
  3.  第二个参数是代码加载完毕以后 需要多长时间去加载这个函数 单位是毫秒
  4.  清除定时器：clearTimeOut(tim) 跟一个参数 --要清除的这个定时器
  5.      <script>
  6.         // 回调函数是一个匿名函数
  7.          setTimeout(function() {
  8.              console.log('时间到了');
  9.          }, 2000);
  10.         function callback() {
  11.             console.log('爆炸了');
  12.         }
  13.         // 回调函数是一个有名函数
  14.         var timer1 = setTimeout(callback, 3000);
  15.         var timer2 = setTimeout(callback, 5000);
  16.     </script>

第二种

setInterval() 闹钟定时器

  1.  window.setInterval(回调函数, [间隔的毫秒数]);
  4. var timer=setInterval(function(){},时间)
  5.     特点：在一定的时间 无限制的执行  --1、关闭浏览器  2、清除掉
  6.     清除定时器：clearInterval(timer) 需要传递一个参数 这个参数就是要清除的定时器
  7.     定时器里面的this指向的是window

除夕倒计时案例

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .box {
  11.             width: 600px;
  12.             height: 600px;
  14.             margin: 100px auto;
  15.             text-align: center;
  17.         }
  19.         .box1 {
  20.             margin-left: 100px;
  21.         }
  23.         span {
  24.             display: inline-block;
  25.             width: 100px;
  26.             height: 50px;
  27.             line-height: 50px;
  28.             margin: 0 10px;
  29.             color: #fff;
  30.             background-color: orange;
  31.         }
  32.     </style>
  33. </head>
  35. <body>
  36.     <div class="box">
  37.         <h1>距离除夕还有</h1>
  38.         <div class="bo1">
  39.             <span id="t">天</span>
  40.             <span id="h">时</span>
  41.             <span id="f">分</span>
  42.             <span id="s">秒</span>
  43.         </div>
  44.     </div>
  45.     <script>
  46.         var c = new Date('2021-02-11 00:00:00')
  47.         var tian = document.getElementById('t');
  48.         var hours = document.getElementById('h');
  49.         var fen = document.getElementById('f');
  50.         var miao = document.getElementById('s');
  51.         Dao();
  52.         setInterval(Dao, 1000);
  54.         function Dao() {
  55.             var date = new Date();
  56.             var time = (c - date) / 1000
  57.             var t = parseInt(time / 60 / 60 / 24);
  58.             t = t < 10 ? '0' + t : t;
  59.             var h = parseInt(time / 60 / 60 % 24);
  60.             h = h < 10 ? '0' + h : h;
  61.             var f = parseInt(time / 60 % 60);
  62.             f = f < 10 ? '0' + f : f;
  63.             var s = parseInt(time % 60);
  64.             s = s < 10 ? '0' + s : s;
  65.             tian.innerHTML = t + '天';
  66.             hours.innerHTML = h + '时';
  67.             fen.innerHTML = f + '分';
  68.             miao.innerHTML = s + '秒';
  69.         }
  70.     </script>
  71. </body>
  73. </html>
  74. 最好采取封装函数的方式才没有空白

2.4停止定时器

  1.  window.clearInterval(intervalID);
  2.  clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

案例

  1. <body>
  2.     <button class="begin">开启定时器</button>
  3.     <button class="stop">停止定时器</button>
  4.     <script>
  5.         var begin = document.querySelector('.begin');
  6.         var stop = document.querySelector('.stop');
  7.         // 全局变量  null是一个空对象（定时器是一个对象，但是setInterval并没有返回定时器对象，而是返回的定时器id）
  8.         var timer = null;
  9.         begin.addEventListener('click', function() {
  10.             timer = setInterval(function() {
  11.                 console.log('ni hao ma');
  12.             }, 1000);
  13.             console.log(timer); // 1 ，定时器的id
  14.         })
  15.         stop.addEventListener('click', function() {
  16.                 clearInterval(timer);
  17.             })
  18.         // 补充内容：
  19.         // 变量的默认初始值，刚开始不知道是什么，那怎么给初始值？变量要存储的数据是什么类型。
  20.         var str = '';
  21.         // sdfasdf  在经过一堆代码执行之后，才知道具体值是什么
  22.         str = 'zs';
  23.         // var num = 0,1,-1
  24.         // var flag = true,false;
  25.         // var obj = null;
  26.     </script>
  27. </body>

2.5this指向

  1. this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，**一般情况下this的最终指向的是那个调用它的对象**。
  1. 全局作用域或者普通函数中，this指向全局对象window（注意定时器里面的this也指向window）
  2. 方法调用中，谁调用方法，this指向谁
  3. 构造函数中this指向构造函数的实例（通过构造函数new出来的对象）
  1.     <button>点击</button>
  2.     <script>
  3.         // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
  4.         // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
  5.         console.log(this);
  6.         function fn() {
  7.             console.log(this);
  8.         }
  9.         window.fn();
  10.         window.setTimeout(function() { 
  11.             console.log(this);
  12.         }, 1000);
  15.         // 2. 方法调用中谁调用this指向谁
  16.         var o = {
  17.             sayHi: function() {
  18.                 console.log(this); // this指向的是 o 这个对象
  19.             }
  20.         }
  21.         o.sayHi();
  22.         var btn = document.querySelector('button');
  23.         btn.addEventListener('click', function() {
  24.                 console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
  25.             })
  28.         // 3. 构造函数中this指向构造函数的实例
  29.         function Fun() {
  30.             console.log(this); // this 指向的是fun 实例对象
  31.         }
  32.         var fun = new Fun();
  33.     </script>

2.6 js的执行机制

  • 单线程 同一个时间只能做一件事
  • 同步和异步
  • js执行机制：先执行同步代码 再执行异步代码
  • 同步代码：除了异步代码以外的都是同步代码
  • 异步代码：事件 回调函数 当事件满足条件的时候才执行
  1. console.log(1);
  3. setTimeout(function() {//yibu
  5.     console.log(3);
  7. }, 0);
  8. console.log(2);
  9. // 结果1,2,3
  1.    console.log(1);
  2.         document.onclick = function () {
  3.             console.log('click');
  4.         }
  5.         console.log(2);
  6.         setTimeout(function () {
  7.             console.log(3)
  8.         }, 3000)
  9.         //1 2