js-BOM

BOM

1. BOM的定义

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

提供了独立于内容而与浏览器窗口进行交互的对象。BOM则由一系列相关的对象构成，并且每个对象提供了很多方法和属性。

2. BOM的构成

BOM： document，location, navigation, screen, history

[所以！！BOM包含了DOM]

3. window对象的常见事件

3.1 窗口加载事件：文档内容完全加载就会触发该事件，调用处理函数

window.onload = function() {}//传统方式注册

window.addEventListener(‘load’, function(){})//方法监听方式注册

[好处]：有了window.onload就可以把js代码写到页面元素的上方，但是本质上还是等内容全部加载完毕再执行处理函数。

[ie9以上才支持的]：document.addEventListener(‘DOMContentLoaded’, function(){})，仅当DOM加载完成，就会触发执行函数。如果图片过多，onload触发需要较长的事件，DOMContentLoaded事件会比较合适。

3.2 调整窗口大小事件：常利用本事件完成响应式布局

window.onresize = function() {}

window.addEventListener(‘resize’, function() {})

3.3 定时器：

• window.setTimeout(调用函数， [延迟毫秒数])：这是一个callback回调函数

  var timer1 = setTimeout(fn, 2000);

  var timer2 = setTimeout(fn, 5000);

  ---

  清除定时器的方式：window.clearTimeout(timeoutID)

  e.g. 清除上面的timer1定时器

  clearTimeout(timer1);

• window.setInterval(回调函数，[间隔毫秒数]): 每隔一段时间就会反复调用

  ---

  清除定时器的方式：window.clearInterval(intervalID)

3.4 this指向:

this的指向在函数定义的时候是确定不了的，只有在函数执行的时候才能确定this到底指向谁。一般this最终的指向的是调用它的对象。

• 全局作用域下：this指向全局对象window
• 方法调用中：this指向调用的对象
• 构造函数中：this指向构造函数的实例