Unit05： window 經常使用子對象-2 、 event 對象 、 Cookie

【經常使用BOM對象】

- navigator：保存瀏覽器配置信息的對象；

       -- cookieEnabled:判斷當前瀏覽器是否啓用cookie；(6.html)

          cookie：是用戶在客戶端存儲數據的文件；window.navigator.cookieEnabled;

          清除cookie，

       -- plugins: 保存全部插件對象的集合

       -- userAgent: 保存了瀏覽器名稱，版本號的字符串

 

- history：window保存當前窗體訪問過的url的歷史記錄棧；(2_1.html)

       history.go(1):前進一次；

       history.go(-1):後退一次；

       history.go(0):刷新當前頁；

      

- location：當前窗口正在訪問的url地址對象；

       location.search              獲取url裏查詢字符串（？以後部分）；先用「&」分割，再用「=」分割；

       location.replace("新url") 在當前窗口打開新鏈接，不可後退；

       使用location打開新鏈接：在當前窗口：

       - location.href="新url";        可後退；

       - location.assign("新url");    可後退；

       - location.reload(); reload當前頁面，刷新；有修改就去服務器找，

 

- screen：當前屏幕的顯示信息；

       screen.Height/Width:完整屏幕寬高；

              availHeight/availWidth: 去掉任務欄屏幕寬高

              win7下相同；

request

response

 

【事件】

瀏覽器自動觸發的或用戶手動觸發的對象狀態的改變；

DOM Leve12 Event標準；IE8自成體系；

時間處理函數：當事件觸發時，自動執行的函數；

 

1.事件定義：3種；

       html：    <div onXX="fun()"></div>

                     div.onclick=function(){

                            eval("fun()");

                     }

                      強調：fun()中this是window；

                      若是得到當前目標對象：

                      html：onXX="fun(this)"

                      js：  fun(elem){};

 

       js： elem.onXX=函數對象；

              一個元素的一個時間處理函數，只能綁定一個函數對象；

 

       DOM標準：elem.addEventlisterner("事件名","函數對象",是否捕獲階段觸發);

              一個元素的一個時間處理函數，能綁定多個函數對象；

 

       IE8：     elem.attachEvent("on事件名"，"函數對象")

              IE8的事件週期：沒有捕獲；

 

2.事件週期：瀏覽器捕獲到事件觸發後，一直到最後一個事件觸發完所經歷的過程；

       DOM標準：3階段；

       - (由外向內)捕獲；從最外層html元素開始，向內逐層「記錄」每層元素綁定的事件處理函數；到目標元素爲止；

       - 目標觸發；自動執行目標元素上綁定的事件處理函數；

       - (由內向外)事件冒泡；從目標元素的父元素開始「逐層」向上執行每層的事件處理函數；到最外層html結束；

 

3.event對象：當事件發生時，自動建立，封裝了事件信息；

       1.得到event對象：

         - html：     <div onXX="fun(event)"></div>

                        實際調用時，event會自動得到當前時間對象；

                        js： fun(e){};

                        沒有兼容問題；

         - js：elem.onXX=函數對象；

              function(){

                     DOM標準：自動建立event對象，默認是arguments第0個；

                     IE:window全局的event屬性；當事件發生時，自動建立event對象，保存在window.event中；

              }

 

       2.event對象包含：

         - 目標元素對象：var src=e.srcElement||e.target;

 

       3.取消 / 利用冒泡

         - 取消冒泡:

              if(e.stopPropagation){

                     e.stopPropagation();

              }else{

                     e.cancleBubble=true;

              };

              通常放在事件結尾取消冒泡；

 

         - 利用冒泡:若是多個子元素中定義了相同的事件處理函數，在父元素上定義一次便可；

              - 事件委託；

 

       4.取消事件；表單提交前若是驗證未經過，若是驗證,取消提交事件；

       if(e.preventDefault){

              e.preventDefault() //DOM

       }else{    

              e.returnValue=false //IE8 

       }

事件座標：3種座標系

 1. 相對於顯示器:

      最大值: screen.availHeight/availWidth

      鼠標位置: e.screenX/Y

 2. 相對於文檔顯示區

      最大值：window.innerHeight/Width

      鼠標位置：e.clientX/x; e.clientY/y

 3. 相對於父元素左上角

      最大值：父元素的寬和高

      鼠標位置：e.offsetX/Y