【常用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.οnclick=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?

?

轉載于:https://www.cnblogs.com/mbyund/p/6406925.html

總結

以上是生活随笔為你收集整理的Unit05： window 常用子对象-2 、 event 对象 、 Cookie的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。