这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战

---

浏览器对象模型

01.基本概念

• BOM： Browser Object Model，即浏览器对象模型

  • 提供了独立于內容而与浏览器窗口进行交互的对象，其核心BOM由一系列相关的对象构成，每个对象都提供了方法与属性

• BOM的顶级对象是 window

  • window对象是浏览器的顶级对象
  • 是JS访问浏览器窗口的一个接口
  • 是一个全局对象：定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • 在调用的时候可以省略 window

---

02.常见window事件

（1）窗口加载事件

• window.onload

  • 窗口加载事件，当文档内容完全加载完成后，才执行

  • 用传统的注册事件方式，只能写一次，以最后一个为准

    window.onload = function() {
        // do something
    }
    
    

    当页面文档内容完全加载完成后，才会执行这里的内容，且只能有一个，如果有多个，则后面的会覆盖前面的

  • 可以用addEventListener，添加多个

    window.addEventListener("load", function() {
        // do something
    })
    
    

    使用addEventListener的方式，可以添加多个

• DOMContentLoaded

  • 该事件触发时，仅当DOM加载完成，且不包括样式表、图片、Flash等等

  • 如果页面的图片很多的话，从用户访问到 window.onload触发，可能需要较长的时间，交互效果可能无法实现，此时用 DOMContentloaded 事件比较合适（大型网站）

    document.addEventListener("DOMContentloaded", function() {
        // DOM加载完即执行
    })
    
    

• pageshow

  • 页面重新加载时触发的事件
  • 这个事件在load事件之后触发

（2）窗口关闭事件

• unload和beforeunload

  • 当浏览器窗口即将被关闭时，触发这个事件

    // window.onbeforeunload = function(){}
    
    window.addEventListener('beforeunload', function(){
        // do something
    })
    

  页面加载时：执行load事件

  页面刷新时：依次执行beforeunload、unload、load事件

  页面关闭时：依次执行beforeunload、unlad事件

（3）调整窗口大小事件

• resize

  • 当浏览器窗口发生变化时，就触发这个事件

    // window.onresize = function(){}
    
    window.addEventListener("resize", function() {
        // do something
    })
    
    

（4）页面滚动事件

• scroll

  • 当浏览器窗口发生滚动时，触发这个事件

    // window.onscroll = function(){}
    
    window.addEventListeners("scroll", function() {
        // do something
    })
    

（5）定时器

• setTimeout()

  • 设置一个定时器，该定时器在时间到之后，执行调用函数

    window.setTimeout(调用函数，延时时间)
    
    

    window 可以省略

    延时时间单位是毫秒，但是可以省略，省略默认是0

    这个调用函数可以直接写函数，或者写函数名，或者字符串形式 “函数名()”

    页面中可能有很多的定时器，我们经常给定时器通过赋值设定标识符 （名字)

  • 清除定时器

    • window.clearTimeout(标识符)

    var timer = setTimeout(function() {
        console.log("我花了5s才显示！")
    }, 5000)
    
    clearTimeout(timer)
    
    

    ---

• setInterval()

  • 设置一个定时器重复调用这一个函数，每隔一段时间，就调用一次回调函数

    window.setInterval(回调函数，间隔时间)
    
    

    window 可以省略

    延时时间单位是毫秒，但是可以省略，省略默认是0

    这个调用函数可以直接写函数，或者写函数名，或者字符串形式 ”函数名()“

    可以给定时器赋值设置标识符 （名字)

  • 停止定时器

    • window.clearInterval(标识符)

    var timer = setInterval(function() {
        console.log("我每隔5s写一次！")
    }, 5000)
    
    clearInterval(timer)
    
    

    ---

  回调函数

  • 普通函数是按照代码顺序直接调用而这个函数

  • 而定时器的函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数

  • 简单理解：回调，就是回头调用的意思，上一件事干完，再回头调用这个函数

    如：点击触发的事件函数，点击之后再调用这个函数；定时器，时间到后再调用这个函数

03.location对象

（1）概念

• window对象提供了一个 location属性，用于获取或设置窗体的URL，并且可以用于解析URL
  • 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location对象

（2）关于URL

• URL：统一资源定位符，是互联网上标准资源的地址

  • 互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它

• 语法结构

  protocol://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link
  

（3） location对象的属性

location对象属性	返回值
location.href	获取或设置 URL
location.host	返回主机（域名）
location.port	返回端口号，没有则为空字符串
location.pathname	返回路径
location.search	返回参数，（？及后面的所有参数）
location.hash	返回片段，#后面的内容，常见于链接、锚点

location对象方法	返回值
location.assign()	跳转页面，重定向页面，可以后退页面
location.replace()	替换当前页面，不能后退页面（不记录浏览历史）
location.reload()	重新加载页面，刷新页面，强制刷新——括号（true）

---

04.navigator对象

（1）概念

• navigator对象，获取有关浏览器的信息

  如浏览器版本，浏览器类型（PC端和移动端）

---

05.history对象

（1）概念

• window对象给我们提供了—个 history对象，与浏览器历史记录进行交互

  • 该对象包含用户（在浏览器窗囗中）访问过的URL。

• back()：后退

• forward()：前进

• go(参数)：前进后退

  • 参数是1，则前进1个页面
  • 参数是-1，则后退1个页面

---

本人前端小菜鸡，如有不对请谅解