DOM 5

Posted 2020-09-28 Hale.Proh

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. 鉴别目标元素是否想要:

              判断元素的名称或属性