BOM經常使用對象

時間 2019-11-12

標籤 bom 經常使用對象简体版

原文原文鏈接

1.BOM的經常使用對象： window navigator history location dicument screen eventjavascript

navigator:保存瀏覽器配置信息的對象css

cookicEnablcd:判斷是否啓用cookichtml

userAgent:判斷瀏覽器的名稱和版本號java

plugins:保存瀏覽器中全部插件信息的集合node

screen：保存顯示屏幕的對象信息瀏覽器

history:保存當前的歷史記錄棧緩存

history.go(-1):後退函數

history.go(1):前進一次優化

history.go(0):刷新this

location:指代當前窗口正在訪問額url地址對象

location.href:保存了當前窗口正在訪問的url地址

設置href屬性爲新url,會在當前窗口打開新的url
location.href="http://www.baidu.com"

location.assign(url):在當前窗口打開新的url
location.assign("http://www.baidu.com");

location.reload(true/false);true:不管是否更改，都得到最新的

false:被更新的頁面，會重新獲取

未被修改的頁面在緩存中取

2.事件:瀏覽器自動觸發的或用戶手動觸發的對象狀態的改變

DOM Level2 Evenl標準：

IE8:自成體系!

事件處理函數：當事件發生時，自動執行的函數對象

其實就是：on事件名

如何綁定事件處理函數：3種：

1.在html元素的開始標籤中設置事件處理函數屬性：

好比：<button onclick="fun()"></button>

2.在js中動態綁定事件處理函數：elem.on事件名=函數對象

好比btn.onclick=function(){在這裏this==>btn}

執行：btn.onclick=fun;

問題：同一元素的同一事件處理函數，只能綁定一個函數對象

3.在js中動態綁定事件處理函數，可同時綁定多個，可修改事件觸發順序

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

IE8:elem.attachEven("on事件名"，函數對象);

好比：btn.addEventListener("click",fun,false/true);

btn.attachEvent("onclick",fun);

事件週期:
DOM: 3個階段:
1. 捕獲: 從最外層元素，向內層元素，逐個記錄綁定的事件處理函數。默認,暫不觸發任何事件。
2. 目標觸發: 優先觸發目標元素上綁定的事件處理函數目標元素: 實際點擊的元素
3. 冒泡: 按照捕獲的順序,由內層，向外層逐層觸發捕獲的事件處理函數

IE8:2各階段：

1. 目標觸發: 優先觸發目標元素上綁定的事件處理函數目標元素: 實際點擊的元素
2. 冒泡: 按照捕獲的順序,由內層，向外層逐層觸發捕獲的事件處理函數

是否可修改事件執行順序：能夠，修改addEventlistener的第三個參數爲true，能夠在捕獲階段觸發，同一事件不能夠觸發兩次。

若是點在外層元素上，捕獲只到目標元素結束

2.在js中動態綁定事件處理函數：

DOM標準：事件對象做爲事件處理函數第一個參數，出入函數中arguments[0]==>事件對象

IE8:事件對象是window下的一個全局屬性：window.event

兼容：var e = window.event||arguments[0];

IE8 DOM

固定套路：

1.取消冒泡：在當前事件處理函數執行結尾，阻止繼續冒泡

DOM:e.stopPropagation();

IE8:e.cancelBubble=true;

兼容代碼：if（e.stopPropagation）{e.stopPropagation();}else{e.cancelBubble=true;}

2.利用冒泡：

優化：多個子元素，定義了相同的事件處理函數，其實只須要將事件處理函數在父元素上定義一次便可。

Why：每一個處理函數的綁定都是一個對象，處理函數綁定的越多，網頁執行效率越低。

減小處理函數的綁定次數，能夠提升執行效率。

得到目標元素：var target = e.srcElement||e.target；

IE DOM

目標元素 vs this

this:會隨事件冒泡而改變

目標元素：不受冒泡影響，始終保存最初的目標元素對象

<html>
　　<head>
　　　　<title>取消與利用冒泡</title>
　　　　<meta charset="utf-8"/>
　　　　<link rel="stylesheet" href="css/3.css"/>
　　</head>
　　<body>
　　　　<div id="keys">
　　　　　　<button>1</button>
　　　　　　<button>2</button>
　　　　　　<button>3</button>
　　　　　　<button>4</button><br>
　　　　　　<button>C</button>
　　　　　　<button>+</button>
　　　　　　<button>-</button>
　　　　　　<button>=</button>
　　　　</div>
　　<textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea>
　　<script>
　　　　//定義函數calc，得到事件對象e
　　　　function calc(e){
　　　　//得到目標元素target
　　　　var target=e.srcElement||e.target;
　　　　//若是target是button
　　　　if(target.nodeName=="BUTTON"){
　　//判斷target的內容
　　　　　　switch(target.innerHTML){
　　　　　　　　case "C"://是C
　　　　　　　　　　//清除id爲sc的元素的內容
　　　　　　　　　　sc.value=""; break;
　　　　　　　　case "="://是=
　　　　　　　　　　try{//嘗試:
　　　　　　　　　　//將sc的內容傳入eval中,將結果保存回sc的內容中
　　　　　　　　　　sc.value=eval(sc.value);
　　　　　　　　　　}catch(err){//若是出錯
　　　　　　　　　　//將錯誤對象轉爲字符串，賦值給sc的內容
　　　　　　　　　　sc.value=String(err);
　　　　　　　　　　}
　　　　　　　　　　break;
　　　　　　　default: //不然
　　　　　　//將target的內容拼接到sc的內容上
　　　　　　sc.value+=target.innerHTML
　　　　}
　　}
}
//爲id爲keys的div添加單擊事件監聽，函數爲calc
keys.addEventListener("click",calc);
　　　　</script>
　　</body>
</html>

3.取消事件：事件執行過程當中，發生異常情況，可阻止事件觸發

好比：onsubmit:自動提交觸發

若是驗證未經過，可取消繼續提交

什麼時候使用：取消元素默認的事件行爲。

1.在html中綁定事件處理函數：2個return

若是<form onsubmit="return valiAll()">
caliAll(){..... return true/false}

若是返回true，繼續執行

若是返回false,取消執行

<html>
<head>
<meta charset="UTF-8">
<title>阻止自動錶單提交</title>
<link rel="Stylesheet" href="css/5.css" />

</head>
<body>

<form>
<h2>增長管理員</h2>
<table>
<tr>
<td>姓名：</td><td>
<input name="username" onfocus="getFocus(this)"
onblur="valiName(this)"/>
<span>*</span>
</td>
<td>
<div class="vali_Info">
10個字符之內的字母、數字和下劃線的組合
</div>
</td>
</tr>
<tr>
<td>密碼：</td>
<td>
<input type="password" name="pwd" onfocus="getFocus(this)" onblur="valiPwd(this)"/>
<span>*</span>
</td>
<td>
<div class="vali_Info">6位數字</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">

<input type="submit" value="保存"/>
<input type="reset" value="重填"/>
</td>
</tr>
</table>
</form>
<script src="js/5.js"></script>
</body>
</html>

如何取消：if(e.preventDefault){e.preventDefault();//DOM}else{e.returnValue=flase;//IE}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。