BOM

1. ***BOM:
   什么是: Browser Object Model
   专门操作浏览器窗口的API —— 没有标准
   DHTML对象模型:
   window 2个角色:
   1. 代替global作为全局作用域对象
   所有全局函数和全局变量都是window的成员
   2. 封装所有DOM和BOM的API
   包括:
   ①history 当前窗口打开后成功访问的历史记录 (window.history)
   ②location 当前窗口正在打开的URL (window.location)
   ③document DOM树的根节点，包含所有网页内容 (window.document)
   ④screen 当前显示设备的信息(window.screen)
   ⑤navigator 浏览器的配置信息(版本，名称，插件，cookie)(window.navigator)
   ⑥event 定义了浏览器中所有事件(window.event)

下图为BOM 其他属性与window为并列关系:

window: 指代当前浏览器窗口对象
打开和关闭窗口
打开: open(“url”,“name”)
关闭: close();

打开一个连接，共有几种方式： 
1. 在当前窗口打开, 可后退:
   html: <a href="url" target="_self">
   js: open("url","_self");
2. 在当前窗口打开, 禁止后退:
   js: location.replace("url")
       在当前窗口打开新url，用新url替换history中原有url
   原理:
     history: 保存当前窗口打开后成功访问过的url的历史记录栈
3. 在新窗口打开，可打开多个:
   html: <a href="url" target="_blank"> 
   js: open("url","_blank");
4. 在新窗口打开，只能打开一个:
   html:<a href="url" target="name">
   js: open("url","name");
 每个窗口都有一个唯一的name属性
 name: 在内存中唯一标识一个窗口的名称
 规定: 同时只能打开一个相同name的窗口
   预定义: _self : 和当前窗口使用相同的name
               _blank: 不指定自定义name，由浏览器随机分配

2. screen对象:
   获得屏幕的大小:
   完整大小: screen.width/height
   何时: 用屏幕大小鉴别设备种类: ——鄙视题
   wide desktop - lg : 1200+
   pc - md: 992+
   pad - sm: 768+
   phone - xs: 480+

   可用大小: screen.availWidth/availHeight
   去掉任务栏之后的剩余大小

3. history: 保存当前窗口打开后成功访问过的url的历史记录栈
   前进: history.go(1)
   后退: history.go(-1)
   刷新: history.go(0)

   其实: history.go(n)

4. ***location: 封装当前窗口正在打开的url对象
   属性:
   .href: 获取或设置当前网页打开的url
   何时: 在当前页面打开新链接时
   简写: location.href=url -> location=url
   .protocol: 协议
   .host: 主机名+端口号
   .hostname: 主机名
   .port: 端口号
   .pathname: 网页的相对路径
   .hash: #锚点
   .search: ?查询字符串
   鄙视: .search -> 参数组成的对象:
   ?uname=zhangdong&upwd=123456
   [“uname=zhangdong”, “upwd=123456”]
   {uname:zhangdong, upwd:123456}

5. ***navigator: 封装浏览器配置信息的对象
   navigator.cookieEnabled: 是否启用cookie
   cookie: 在客户端本地持久存储一个数据的文件
   如果禁用无法保存搜索关键词，或记住密码

   navigator.plugins: 封装所有插件对象的集合

   判断浏览器的名称和版本:
   navigator.userAgent: 保存浏览器内核，名称，版本号的字符串

6. ****event
   事件: 浏览器自己触发的或用户手动触发的页面(元素)状态的改变。
   浏览器在事件发生时，都会自动调用事件处理函数
   事件处理函数: 当节点发生事件时，自动调用的函数
   其实就是节点的onxxx属性
   事件处理函数的值，都是一个函数对象
   事件发生时: 节点对象.onxxx();
   事件处理函数中的this: .前的节点对象

   何时: 只要希望一个元素/节点，能够响应某个事件时
   在发生某个事件时，能自动执行事件处理函数
   如何: 3种方式:

   1. 在html元素开始标签中:
      html: <ANY on事件名=“js语句(this)”
      js: function 函数(ANY){ … }
      问题: 1. 无法为动态生成的元素绑定事件
      2. 事件绑定分散在页面各个角落，不便于维护

   2. 在js中绑定事件: 2种方式:

   3. ANY.on事件名=function(){
      this->ANY
      }
      事件发生时，自动执行: ANY.onXXX();
      问题: 每个ANY的一个事件处理函数，只能绑定一个函数对象。
      解决:

   4. ANY.addEventListener(“事件名”,fn)
      ANY.removeEventListener(“事件名”,fn)
      如果只是添加事件监听，可用匿名函数
      如果可能移除某个处理函数，就必须用有名的函数绑定
      IE8: ANY.attachEvent(“on事件名”,fn)

      其实: addEventListener(“事件名”,fn,capture)
      capture: 是否在捕获阶段就提前触发
      默认false: 所有事件处理函数都在冒泡阶段反向触发
      true: 该事件会在捕获阶段就提前触发！