08 BOM 后篇

正课:
1. *****定时器
   动画
2. screen
3. history
4. ***location
5. ***navigator
6. ****event

---

1. *****定时器
   动画:
  练习:
     获取长度属性值时: 获得都是带单位的字符串，不能直接计算
                                  都要先去单位(parseFloat)，再计算
     设置长度属性值时: 在数值结尾拼单位(px)

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}

正课:
1. ***location
2. ***navigator
3. ****event

---

1. ***location:
   属性:
   方法:
    location.assign("url") => location.href="url"
                                              location="url"
    location.reload(false/true): 重新从服务器加载url
                                 force
         默认false: 优先从服务器端缓存中获取文件
         如果改成true, 强制从服务器硬盘获取新文件
    location.replace(url): 在当前窗口打开新url，禁止后退

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

    navigator.plugins: 封装所有插件对象的集合
      
    判断浏览器的名称和版本:
    navigator.userAgent: 保存浏览器内核，名称，版本号的字符串

3. ****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: 该事件会在捕获阶段就提前触发！

***事件周期:
   DOM标准: 3阶段
      1. 捕获(capture): 由外向内依次记录各级元素绑定的相同事件处理函数
      2. 目标出发: 执行实际触发事件的元素上的处理函数
      3. 冒泡: 由目标元素向外，出发各级父元素上绑定的相同事件处理函数
        目标元素(target): 实际触发事件的元素     

   IE8: 2个阶段: 没有捕获阶段   

   事件对象: event: 在事件发生时，自动创建的封装所有事件信息的对象
       event对象提供了操控事件的方法: 阻止事件, 取消冒泡....
   何时: 1. 为了获得事件相关的数据
            2. 操控事件
   如何:
      获取: DOM标准: 事件对象，默认作为事件处理函数的第一个参数传入:
               IE8: 事件对象自动保存在全局变量event中
         兼容: function eventHandler(e){
         e=e||window.event;
                  }
      
   取消冒泡: e.stopPropagation();
   利用冒泡:
   优化: 尽量少的添加EventListener
       为什么: 每个EventListener都是一个对象
          浏览器触发事件时，会轮询每个EventListener对象
          添加的EventListener越多，页面响应速度越低
   解决: 当多个平级子元素绑定相同的事件处理函数时
           其实，只要在父元素绑定一次，所有子元素共用即可！
   难题: 1. 如何获得目标元素:
              this->父元素 X
              DOM: e.target ->目标元素
              IE8: e.srcElement
                  兼容: var target=e.target||e.srcElement;
            2. 鉴别目标元素是否想要:
              解决：在执行正式操作前，判断目标元素的名称或属性

  取消事件：阻止默认行为

   何时：当事件发生后，不希望事件再执行浏览器默认行为时

             e.preventDefault();//拿a标签当按钮使的时候尤其注意，不希望实现跳转