BOM

1.BOM

   window下包含：

        history 管前进后退

        location 管地址栏

        document 其实就是DOM中的document对象

        navigator 管浏览器配置信息

        screen  管显示设备的信息

        event   管事件处理

 

history：

       什么是：保存当前窗口打开后，成功访问过的url的历史记录数组。

       何时：只要用程序自动前进后退时，都用history

       如何：history.go(n)

       比如：前进一步：history.go(1)

                 后退一步：history.go(-1)

                 有时后退一次不管用，可histroy.go(-2)后退两步。

                 刷新:history.go(0)

 

location:

     什么是：专门保存地址栏中的地址信息，以及提供执行跳转操作的方法的对象。

     何时：1.希望获得地址栏中的url信息时。

               2.希望执行一些特殊的跳转操作时

     如何：

              1.获得地址栏里的url信息

                      location.href完整url

                      location.protocol协议

                                   .host  主机名+端口号

                                   .hostname  主机名

                                   .port   端口号

                                   .pathname 相对路径

                                   .search获得?以及之后的查询字符串

                                   .hash   获得#锚点地址

              2.执行跳转操作：

                    1.在当前窗口打开,可后退：

                     location.href="新url"

                     或location.assign("新url")

                     或location="新url"

                      都等效于:window.open("url","_self")

                     2.在当前窗口打开，禁止后退：

                     location.replace("新url")

                     3.刷新页面:2种:

                          1.普通刷新:优先从浏览器缓存中获取资源，缓存中过期或没有时,才去服务器

                             重新获取。

                                       history.go(0)

                                       location.reload()

                                       F5

                                       问题:可能即使刷新后，也无法获得服务器上的新内容。

                            2.强制刷新：始终跳过浏览器缓存，总是从服务器端获取新内容：

                                      location.reload(true)

                                      问题：每次都需要从服务器重新获取，导致加载慢，且增大

服务器的压力！ 

                

navigator:

         什么是：保存浏览器配置信息的对象

         何时：获取浏览器配置信息时

         包括：

              1.判断是否安装某个插件

                     什么是插件：为浏览器添加新功能的小软件。

                     如何判断是否安装了某个插件：

                            浏览器中所有已安装的插件信息都保存在navigator的plugins集合中。

插件名就是插件信息在集合中的下标名。

                            可以强行访问插件名下标，如果返回的值undefined，就说明没安装。

如果返回的不是undefined,说明安装了。

               2.判断浏览器的名称和版本号

                 浏览器的名称和版本号都包含在一个navigator的userAgent属性中。

                  但是，userAgent是一个巨大的字符串，我们需要通过字符串查找的方式，判断浏览器的名称和版本号、

                

 2.事件：

        什么是：浏览器自动触发的，或用户手动触发的页面内容状态的改变。

        事件属性：每个元素上都有一批以on开头的事件属性，用于提前保存事件

处理函数。当事件发生时,浏览器会自动找到该事件属性上绑定的处理函数，自动执行。

       事件处理函数：当事件发生时，想要自动执行的函数

       何时：只要希望事件发生时，能自动执行一项任务。

       如何：

            1.绑定事件处理函数：3种：

                   1.HTML中:<ANY  on 事件名="js语句">

                      问题:不便于维护和重用

                    2.js中用赋值方式绑定：

                      DOM元素.on事件名=function(){ ..... }

                      问题：一个事件属性,只能绑定一个处理函数。如多次绑定处理函数，

只有最后一个事件处理函数可以生效。

                   3.js中用添加事件监听对象的方式：

                                   添加   事件    监听

                     DOM元素.addEventListener("事件名",事件处理函数)

                     原理:

                           1.其实在浏览器中有一个事件监听对象队列。

                           2.每为一个DOM元素，绑定一个事件处理函数，就会在监听对象对列中添加

一个新的监听对象。

                           DOM元素.on事件名=function也是添加事件监听对象的意思，但是，第二次

执行=function时,不是新增对象,而是找到原监听对象替换。         

                           DOM元素.addEventListener是不管当前元素有没有这个事件的处理函数

都增加一个新的监听对象。

                           3.当事件发生时，浏览器会遍历整个监听对象的队列，找到符合条件

的监听对象，执行其中的处理函数。

            2.当事件发生时，浏览器自动调用对应元素上的对应事件处理函数执行。

            3.移除事件监听:

                DOM元素.removeEventListener(

                     "事件名",原处理函数对象

                 )

                强调：如果一个处理函数可能被移除，那么在绑定时就不要用匿名函数。而是

用有名称的函数绑定！

 

DOM事件模型：

        什么是：从事件发生开始，到所有处理函数触发完，所经历的整个过程：

        包括：3个阶段：

                1.捕获：由外向内，依次记录各级父元素上绑定的处理函数---只记录，不执行。

                2.目标触发：先触发目标元素上的处理函数

                   目标元素：最初想点击的那个元素

                3.冒泡：由内向外，依次出触发捕获阶段记录的各级父元素上的处理函数。

事件对象：

         什么是：当事件发生时，浏览器自动创建的，保存事件信息的对象

         何时：2种：

               1.希望获得事件相关的信息时

                2.希望改变事件模型的默认行为

         如何：

               1.不用自己创建！只要获取即可！

                事件对象，总是作为处理函数的第一个参数自动传入。-------信任               

                当事件发生时：

                    //window创建event对象

                 //DOM元素.on事件名(event)

                  DOM元素.on事件名=function (e){ 

                      //e就获得了window自动创建的event

                  }

               2.取消冒泡

                   e.stopPropagation();

                       停止     蔓延

               3.事件委托/利用冒泡：

                  优化：尽量减少事件监听的个数。

                  因为：浏览器触发事件时采用的是遍历队列的方式。队列

中监听对象多，遍历查找的速度就可能慢，事件相应的速度就可能延迟。

队列中监听对象少，遍历查找的速度就快，事件响应的速度就快！

                  如何：今后只要多个平级子元素都要绑定相同的事件时，只要将事件

在父元素绑定一次，所有子元素都可通过冒泡原理共享父元素的事件使用！

                  难题：

                       1.每个按钮做的事儿不一样，如何获得实际点击的目标元素？

                       错误：this不能用！

                       正确：用e.target代替this

                                  e.target是始终保存目标元素的特殊属性。不随冒泡而改变。

 

                  优点：

                         1.无论多少个子元素，都可共享一个事件处理函数

                         2.即使动态添加的元素，也可自动获得处理函数

 

                 4.阻止默认行为：

                   什么是：有些元素上自带了一些默认行为：

                   比如：<a href="#">默认回到顶部</a>

                   如何：e.preventDefault();

             

                 5.鼠标位置:3组：

                    1.相对于屏幕左上角的位置：

                          e.screenX,e.screenY

                           屏幕              屏幕

                    2.相对于浏览器中文档显示区域左上角的位置：

                         e.clientX,e.clientY

                             客户端   客户端

                    3.相对于当前事件绑定的元素左上角的偏移量：

                          e.offsetX,e.offsetY

 

                    

 

总结：DOM优化：

1.查找：

   如果只要一个条件就可找到元素时，首选getElementsByXX

   如果查找条件复杂，就首选按选择器查找

2.修改样式能一句话修改的，就不两句话修改：

    为了减少重排重绘

    元素.style.cssText="width:200px;height:100px;"

    代替：  元素.style.width="200px"

                 元素.style.height="100px"

3.添加元素:为了减少重排重绘，应该尽量减少操作DOM数的次数。

  如果同时添加父元素和子元素，应该先将子元素添加到父元素，最后一次性添加

到DOM树。

   如果父元素已经在页面上，需要同时添加多个平级子元素时，应该创建文档片段，

将子元素先加入文档片段中，最后再一次性将文档片段添加到DOM树。

4.尽量减少事件监听的个数:事件委托

    1.将事件绑定在父元素上一份，所有子元素冒泡共用

    2.用e.target代替this

    3.判断e.target的特征，只有符合条件的目标元素才能执行后续正常的操作。