BOM 基础

BOM概述

• BOM = Browser Object Model 👉浏览器对象模型
• 它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window
• BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
• BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C
• BOM最初是Netscape 浏览器标准的一部分

定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

窗口加载事件

• window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。

window.onload = function(){
    
};

// 或者
window.addEventListener("load",function(){});

• window.onload 传统注册事件方式，只能写一次
• 如果有多个，会以最后一个window.onload为准
• 如果使用addEventListener 则没有限制

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

• DOMCountentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等
• 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间
• 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded事件比较合适。