JS（5）_js5-CSDN博客

本文链接：https://blog.csdn.net/weixin_46340162/article/details/123462381

1.BOM：浏览器对象模型，顶级对象是window，无统一标准，兼容性差，DOM包括在BOM里
  window是全局对象，定义在全局作用中的变量和函数都会变成window属性或方法
2.window常见事件
（1）窗口加载事件
  等页面所有内容加载完成时才会执行（包括图像，文件脚本，css等）
  window.onload = function()传统方式，多个绑定只以最后一个为准
  window.addEventListener('load',function(){})
  等到DOM加载完就会执行（不包括图像，文件脚本，css等），页面JS交互不受影响
  document.addEventListener('DOMContentLoaded',function(){})
（2）窗口大小调整事件
  窗口大小调整时会触发
  window.onresize = function(){}
  window.addEventerListener("resize",function(){})
（3）定时器
  第一种
  window.setTimeout(函数,延迟时间)
  一段时间之后调用一次函数
  创建定时器
  setTimeout(function(){
    console.log('定时器');
  },2000)
  function fn(){
    console.log('定时器');
  }
  var timer = setTimeout(fn, 2000);
  清除定时器  
  clearTimeout(timer)
  定时器中的函数需等待一定时间才会调用，叫回调函数
  可以理解为上一件事做完之后才会调用的函数
  第二种
  setInterval(函数,延迟时间)
  每隔一段时间反复调用函数
  clearInterval(定时器变量名)
  注意：当定时器被定义在函数内部时，外部函数访问不到，消除不了
       先在全局定义一个timer变量赋值为null，然后在把定时器赋值给timer
       最后clearInterval(timer)就行了
  模拟点击一次后一段时间内不能再点
    手机号：<input type="number"> <button>发送</button>
  <script>
    var btn = document.querySelector('button');
    var time = 5
    btn.addEventListener('click',function(){
      btn.disabled = true
      var timer = setInterval(function(){
        if(time == 0){
          clearInterval(timer)
          btn.disabled = false
          btn.innerHTML = '发送'
          time = 5
        }
        else{
          btn.innerHTML = '还剩下'+ time + '秒'
          time--
        }
      },1000)
    })
  </script>

3.this指向
  this指向在定义函数时是确定不了的，只有在执行函数时才能确定this到底指向谁
  this一般都指向是调用它的对象
（1）全局作用域下的变量和函数，定时器中的this指向window
（2）方法调用，谁调用指向谁
  var obj = {
    sayHello:function(){
      console.log(this);
    }
  }
  this指向obj
  obj.sayHello()
（3）构造函数中this指向实例
  function People(){
    console.log(this);
  }
  this指向zhangsan
  var zhangsan = new People()
4.JS执行任务
  因为JS是单线程语言，执行比较慢，H5提出了Web Worker标准，允许JS脚本创建多个线程
  于是出现了同步和异步，他俩的本质区别就是执行顺序
  同步任务都在主线程上执行栈里
  异步是由回调函数实现的，一般有三中情况
（1）普通事件：click，resize等
（2）资源加载：load，error等
（3）定时器：setInterval，setTimeout等
  异步任务相关的回调函数都添加到任务队列里（也称消息队列）
  执行机制：先执行同步任务，把异步任务都放到消息队列里
           执行栈同步任务执行完之后，会按次序读取任务队列中的有任务
           被读取的异步任务进入执行栈开始执行
  例如，配图1和图2观看
  <script>
    console.log(1);
    document.onclick = function(){
      console.log('click');
    }
    console.log(2);
    setTimeout(function(){
      console.log(3);
    },3000)
  </script>
  执行时，先输出1
  遇到click，交给异步进程处理，等待点击，只有点击才会把回调函数写到消息队列里去
  不点击，回调函数留在里面，继续执行，输出2
  遇到定时器，交给异步进程处理，等三秒事件到了后，把回调函数放到消息队列里去
  执行栈空了，任务队列里的异步任务拿回到执行栈执行，输出3
  此时点击鼠标，异步进程里的回调函数进入消息队列
  主线程发现异步任务，拿回到执行栈执行，输出click
  主线程不断的获取任务执行任务，这种机制称为事件循环

图1

图2

5.URL
  Uniform Resource Locator统一资源定位符是标准资源地址
  互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器该如何处理它
  格式间图3

图3

6.location对象常用方法 见图4
7.navigator对象
  这个对象中我们最常用的是userAgent
  该属性可以返回由客户机发送服务器的user-agent头部
  通过头部可以判断是在什么设备上打开页面
8.history对象
  back()后退功能
  forward()前进功能
  go(参数)前进后退功能，参数1则前进1个页面，-1则后退一个页面

图4

9.元素偏移量offset
  offset系列属性可以动态的得到该元素的位置，大小等，得到的值不带单位
  属性值 见图5
  offset和style区别 见图6
（1）计算鼠标在盒子中的位置
  <div class="box"></div>
  <script>
    先得到鼠标在页面中的位置
    在得到盒子距页面的距离
    减法得到最终结果
    var box = document.querySelector('.box')
    box.addEventListener('click',function(e){
      var x = e.pageX - this.offsetLeft
      var y = e.pageY - this.offsetTop
      console.log(x);
      console.log(y);
    })
  </script>
10.元素可视其区client
   使用client系列的相关属性可以动态获取该元素边框大小，元素大小等
   属性值 见图7
11.元素滚动scroll
   可以动态得到元素大小和滚动距离
   具体见图8
   点击滚动条，触发scroll事件
12.三大系列总结 见图9

图5

图6

图7

图8

图9

13.自动调用函数
   不需要调用，能自己立即执行
   (function(){})() 或者 (function(){}())
   例如
   (function(a,b){
     console.log(a,b);
   })(1,2);
   最后这个小括号可以看作是调用函数，能传参，也可以写函数名字
   它会创建一个独立作用域，避免命名冲突
14.mouseenter和mouseover
   monseenter不会冒泡，mouseover会冒泡
   mouseover经过自身盒子触发，经过子盒子还会触发
   mouseenter只有经过自身盒子才触发
   mouseleave也不会冒泡
15.window.sessionStorage
   生命周期为关闭浏览器窗口，在同一窗口下数据可以共享，以键值对的形式存储
   能存储大约5M
   sessionStorage.setItem(key,value)
   sessionStorage.getItem(key)
   sessionStorage.removeItem(key)
   sessionStorage.clear()删除所有
16.window.localStorage
   生命周期永久，除非手动删除，可以在同一浏览器多窗口下使用，以键值对的形式存储
   localStorage.setItem(key,value)
   localStorage.getItem(key)
   localStorage.removeItem(key)
   localStorage.clear()删除所有