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，由浏览器随机分配

   窗口大小和窗口位置: (了解)
   窗口大小: 
      1. 完整窗口大小:  window.outerWidth/outerHeight
 ***2. 文档显示区大小: window.innerWidth/innerHeight
     调整: 2个机会: 
      1. 在打开窗口时，就规定大小:
         var config="left=?,top=?,width=?,height=?"; 
         open("url","name",config)
      2. 打开窗口后再调整——被禁用
       window.resizeTo(width,height)
       window.resizeBy(width增量,height增量)
   窗口位置: 窗口左上角距屏幕左上角的位置
       window.screenLeft|screenX 
       window.screenTop|screenY
     调整: 
       moveTo(left,top)
       moveBy(left的增量,top的增量)

1.*****定时器:
  什么是: 让程序按照指定时间执行一项任务
  何时: 
     1. 让程序每隔一段时间间隔反复执行一项任务——周期性
     2. 让程序等待一段时间后自动执行一次任务——一次性
  如何: 
    周期性定时器: 3件事: 
     1. 任务函数task
     2. 启动定时器: 将task放入定时器中，设定时间间隔
         timer=setInterval(task, ms);
        timer是唯一标识一个定时器实例的序号
            强调: task不能加()，因为是传递给定时器去回调执行
     3. 停止定时器: 
         clearInterval(timer);
        问题: 定时器往往需要自动停止
        解决: 在*任务函数*中判断临界值
                  如果未达到临界值，继续执行任务
                  否则 停止定时器

    一次性定时器:  先等待，再执行一次，然后自动释放
    3件事: 
     1. 任务函数task
     2. 启动定时器: 将task放入定时器中，设定等待时间
         timer=setTimeout(task, ms);
     3. 停止定时器: （其实是在执行之前，停止等待）
         clearTimeout(timer);

   定时器原理: 
     定时器中的回调函数，必须在主程序所有语句执行完最后才能开始执行！

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种方式: 
        1. ANY.on事件名=function(){
                 this->ANY
            }
            事件发生时，自动执行: ANY.onXXX();
           问题: 每个ANY的一个事件处理函数，只能绑定一个函数对象。
           解决: 
        2. ANY.addEventListener("事件名",fn)
              ANY.removeEventListener("事件名",fn)
           如果只是添加事件监听，可用匿名函数
           如果可能移除某个处理函数，就必须用有名的函数绑定
           IE8: ANY.attachEvent("on事件名",fn)

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