2020/08/03~08/09週報

【本週任務】

BOM

window物件

1.BOM 的核心物件是 window，它表示瀏覽器的一個範例。在瀏覽器中，window 物件有雙重角色，
它既是通過 JavaScript 存取瀏覽器視窗的一個介面，又是 ECMAScript 規定的 Global 物件。
（1）全域性變數不可以通過delete刪除，但是window物件上直接定義的屬性可以。
（2）嘗試存取未宣告的變數會拋出錯誤，但是通過查詢window物件，可以知道某個可能未宣告的變數是否存在。
2.視窗位置screenTop、screenLeft
screenTop:瀏覽器視窗相對於電腦視窗上邊的位置
screenLeft：瀏覽器視窗相對於電腦視窗左邊的位置
調整位置：
moveTo()接收的是新位置的 x 和 y 座標值
moveBy()接收的是在水平和垂直方向上移動的畫素數
3.視窗大小innerWidth、innerHeight、outerWidth、outerHeight
innerWidth、innerHeight：返回頁面可視區大小（減去了邊框）
outerWidth、outerHeight： 返回瀏覽器本身的尺寸
clientWidth、clientHeight：儲存了頁面視口資訊

documetn.documentElement.clientWidth
document.documentElement.clientHeight

調整大小：
resizeTo(X,Y):接收的是新的寬和高
resizeBy(X,Y):接收的是高度差，如果X,Y是正的，就在原有寬高上加上這麼多，如果是負的就減去這麼多
4.導航和開啓視窗window.open()，window.close()僅適用於通過 window.open()開啓的彈出視窗
window.open()可以接收 4 個參數：要載入的 URL、視窗目標、一個特性字串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前載入頁面的布爾值。

//開啓頁面
<input type="button" value="open" οnclick="window.open('close.html'); "/>
//關閉頁面
<input type="button" value="close" οnclick="window.close()"/>

5.間歇呼叫和超時呼叫
（1）間歇呼叫
設定間歇呼叫的方法是 setInterval()，要執行的程式碼（字串或函數）和每次執行之前需要等待的毫秒數。
setInterval(程式碼，毫秒數)：返回一個數值ID
（2）超時呼叫
超時呼叫需要使用 window 物件的 setTimeout()方法，它接受兩個參數：要執行的程式碼和以毫秒
表示的時間（即在執行程式碼前需要等待多少毫秒）
setTimeout(程式碼，毫秒數)：返回一個數值ID
6.系統對話方塊
（1）alert（"hello world "）；
（2）confirm(「hello world」);
（3）prompt()；

location物件

location 是最有用的 BOM 物件之一，它提供了與當前視窗中載入的文件有關的資訊，還提供了一
些導航功能。
assign()方法併爲其傳遞一個 URL
location.assign(「http://www.wrox.com」);

navigator物件

window.navigator.userAgent
alert(window.navigator.userAgent); //判斷瀏覽器型別

BOM 中還有兩個物件：screen 和 history，但它們的功能有限。screen 物件中儲存着與用戶端顯示器有關的資訊，這些資訊一般只用於站點分析。history 物件爲存取瀏覽器的歷史記錄開了一個小縫隙，開發人員可以據此判斷歷史記錄的數量，也可以在歷史記錄中向後或向前導航到任意頁面

DOM

DOM 描繪了一個層次化的節點樹，允許開發人員新增、移除和修改頁面的某一部分。

節點層次

DOM 可以將任何 HTML 或 XML 文件描繪成一個由多層節點構成的結構。
1、Node型別
結點型別都繼承自node型別，結點型別由在node型別中定義的12個常數值表示。文件中所有的節點之間都存在這樣或那樣的關係。節點間的各種關係可以用傳統的家族關係來描
述，相當於把文件樹比喻成家譜。

每個結點都有一個childNodes屬性，存取childNodes屬性可以用
someChild.childNodes[0]或someChild.childNodes.item(0)
每個結點都有一個parentNodes屬性，與childNodes屬性存取方式相同
children與childNodes類似，但它只對元素結點有操作，不會對文字結點進行操作
parentNode：是指某一元素在結構上的父級，是固定的，不同情況不會有區別
offsetNode：是指已定位的父級，不一定是結構上的父級，會改變

收尾子節點：firstElementChild、lastElementChild
兄弟節點：
nextSibing、nextElementSibing
preciousSibing、previousElementSibing

DOM操縱結點：
appendChild()，用於向 childNodes 列表的末尾新增一個節點。
insertBefore()，這個方法接受兩個參數：要插入的節點和作爲參照的節點。
replaceChild()方法接受的兩個參數是：要插入的節點和要替換的節點。要替換的節點將由這個
方法返回並從文件樹中被移除，同時由要插入的節點佔據其位置。

其他方法：
cloneNode()，用於建立呼叫這個方法的節點的一個完全相同的副本。cloneNode()方法接受一個布爾值參數，表示是否執行深複製。
normalize()，這個方法唯一的作用就是處理文件樹中的文字節點。

2、document型別
（1）文件的子節點：
DocumentType、Element、ProcessingInstruction、Commom
（2）文件資訊：document . title：包含的是< title >的內容通過這個屬性可以取得當前頁面的
標題，也可以修改當前頁面的標題並反映在瀏覽器的標題列中
（3）查詢元素
（a）getElementById（）；
（b）getELementsByTagName（）；
（4）文件寫入
（a）兩個都接收的是字串，只不過第二個會自動新增 \n
write（）；
writeIn（）；
（b）開啓和關閉網頁
open（）；
close（）；

3.Element型別
（a）子節點：Element、Text、Comment、ProcessingInstruction、CDATASection 或
EntityReference
（b）HTML元素
所有 HTML 元素都由 HTMLElement 型別表示，不是直接通過這個型別，也是通過它的子型別來表示。
id：元素的唯一識別符號
title：元素的附加說明
lang：元素的語言程式碼
dir：語言的方向
className:與元素的class 特性對應
（c）獲取特性：getAttribute（）；
（d）設定特性：setAttribute（）；
（e）刪除：removeAttribute（）；
（f）建立元素：createElement（）；

4.Text型別（純文字內容）
文字節點由 Text 型別表示，包含的是可以照字面解釋的純文字內容。純文字中可以包含跳脫後的HTML 字元，但不能包含 HTML 程式碼。
（a）建立文字節點：document.createTextNode（），這個方法接受一個參數——要插入節點中的文字。
（b）normallize():在包含兩個或多個文字元素的父節點上呼叫該方法，會把許多文字節點合併成一個
（c）splitText():將一個吻吧分成兩個文字節點，按照指定位置分隔

5.Comment型別
註釋在 DOM 中是通過 Comment 型別來表示的。
Comment 型別與 Text 型別繼承自相同的基礎類別，因此它擁有除 splitText()之外的所有字串操作方法。與 Text 型別相似，也可以通過 nodeValue 或 data 屬性來取得註釋的內容。
使用 document.createComment()併爲其傳遞註釋文字也可以建立註釋節點。

6.CDATASection型別
CDATASection 型別只針對基於 XML 的文件，表示的是 CDATA 區域。與 Comment 類似，CDATASection 型別繼承自 Text 型別，因此擁有除 splitText()之外的所有字串操作方法。

7.DocumentType型別
DocumentType 型別在 Web 瀏覽器中並不常用，僅有 Firefox、Safari 和 Opera 支援它。

8.DocumentFragment型別
在所有節點型別中，只有 DocumentFragment 在文件中沒有對應的標記。DOM 規定文件片段是一種「輕量級」的文件，可以包含和控制節點，但不會像完整的文件那樣佔用
額外的資源。
建立文件片段：document.createDocumentFragment();
可以通過appendChild()和insertBefore()把文件片段新增到文件中

9.Attr型別
（a）方法：getAttribute()、setAttribute()、removeAttribute()
（b）屬性：
name:特性名稱
value:特性的值
specified:布爾值，用來區別特性是在程式碼中是指定的還是預設的

事件

JavaScript 與 HTML 之間的互動是通過事件實現的。事件，就是文件或瀏覽器視窗中發生的一些特定的互動瞬間。

事件流

1.事件冒泡：
IE 的事件流叫做事件冒泡（event bubbling），即事件開始時由最具體的元素（文件中巢狀層次最深
的那個節點）接收，然後逐級向上傳播到較爲不具體的節點（文件）。
2.事件捕獲：
事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預定目標之前捕獲它。
3.DOM事件流
事件流包含三個階段：事件捕獲階段、處於目標階段、事件冒泡階段

事件處理程式

事件就是使用者或瀏覽器自身執行的某種動作。諸如 click、load 和 mouseover，都是事件的名字。
而響應某個事件的函數就叫做事件處理程式（或事件偵聽器）。事件處理程式的名字以"on"開頭，因此click 事件的事件處理程式就是 onclick，load 事件的事件處理程式就是 onload。爲事件指定處理
程式的方式有好幾種。
1.DOM0級處理程式
將一個函數賦值給一個事件處理程式屬性

btn.οnclick=onClick(); //新增事件
//btn.οnclick=null; //刪除事件處理程式

2.DOM2級處理程式
用於處理指定和刪除事件處理程式的操作：addEventListener()和 removeEventListener()。所有 DOM 節點中都包含這兩個方法，並且它們都接受 3 個參數：要處理的事件名、作爲事件處理程式的函數和一個布爾值。新增處理指定和刪除事件處理程式

btn.addEventListener("click", onClick, false); //新增事件
btn.removeEventListener("click", onClick, false); //移除事件

3、IE事件處理程式
IE 實現了與 DOM 中類似的兩個方法：attachEvent()和 detachEvent()。這兩個方法接受相同
的兩個參數：事件處理程式名稱與事件處理程式函數。

事件物件

在觸發 DOM 上的某個事件時，會產生一個事件物件 event，這個物件中包含着所有與事件有關的
資訊。

事件型別

UI事件

1、load事件
當頁面完全載入後(包括所有影象、javascript檔案、CSS檔案等外部資源)，就會觸發window上的load事件

<!DOCTYPE html> 
<html> 
<head> 
 <title>Load Event Example</title> 
</head> 
<body onload="alert('Loaded!')"> 
</body> 
</html> 
LoadEventExample02.htm

2.unload事件
該事件在文件被完全解除安裝後觸發，只要使用者從一個頁面切換到另一個頁面，就會觸發unload事件。

//使用JavaScript：
EventUtil.addHandler(window,"unload",function(){
    alert("Unload");
});
//第二種方法，爲body元素新增一個特性
<!DOCTYPE html>
<html>
<head>
    <titile>Unload Event Example</title>
</head>
<body onunload = "alert('Unloaded!')">
</body>
</html>

3.resize事件
當瀏覽器視窗被調整到一個新的高度或寬度時，就會觸發 resize 事件。

EventUtil.addHandler(window, "resize", function () {
    alert("Resized");
});

4、scroll事件

window.addEventListener('scroll',function(){
    if(document.compatMode == "CSS1Compat") {
        alert(document.documentElement.scrollTop);
    } else {
        alert(document.body.scrollTop);
    }
},false);

焦點事件

焦點事件會在頁面元素獲得或失去焦點時觸發。利用這些事件並與 document.hasFocus()方法及
document.activeElement 屬性配合，可以知曉使用者在頁面上的行蹤。有以下 6 個焦點事件。

1.blur:在元素失去焦點時觸發。這個事件不會冒泡。所有瀏覽器都支援他。
2.DOMFocusIn:在元素獲得焦點時觸發。這個事件與HTML事件focus等價，但它冒泡。只有Opera支援這個事件。ＤＯＭ３級事件肥企鵝了DOMfocusIn,選擇了focusin.
3.DOMFocusOut:在元素失去焦點時觸發。這個事件是ＨＴＭＬ事件blur的通用版本。只有Opera支援這個事件。DOM3 級事件廢棄了 DOMFocusOut,選擇了focusout.
4.focus:在元素獲得焦點時觸發，這個事件不會冒泡，所有瀏覽器都支援他。
5.focusin:在元素獲得焦點時觸發。這個事件與HTML事件focus等價，但它冒泡。支援這個事件的瀏覽器有IE5.5+，Safari5.1+、Opera11.5+和Chrome
6.focusout:在元素失去焦點時觸發，這個事件是HTML事件blur的通用版本。
當焦點從頁面中的一個元素移動到另一個元素，會依次觸發下列事件：
(1) focusout 在失去焦點的元素上觸發；
(2) focusin 在獲得焦點的元素上觸發；
(3) blur 在失去焦點的元素上觸發；
(4) DOMFocusOut 在失去焦點的元素上觸發；
(5) focus 在獲得焦點的元素上觸發；
(6) DOMFocusIn 在獲得焦點的元素上觸發。

滑鼠事件

1.click：在使用者單擊主滑鼠按鈕（一般是左邊的按鈕）或者按下回車鍵時觸發。這一點對確保
易存取性很重要，意味着 onclick 事件處理程式既可以通過鍵盤也可以通過滑鼠執行。
2.dblclick：在使用者雙擊主滑鼠按鈕（一般是左邊的按鈕）時觸發。從技術上說，這個事件並不
是 DOM2 級事件規範中規定的，但鑑於它得到了廣泛支援，所以 DOM3 級事件將其納入了標準。
3.mousedown：在使用者按下了任意滑鼠按鈕時觸發。不能通過鍵盤觸發這個事件。
4.mouseenter：在滑鼠遊標從元素外部首次移動到元素範圍之內時觸發。這個事件不冒泡，而且
在遊標移動到後代元素上不會觸發。DOM2 級事件並沒有定義這個事件，但 DOM3 級事件將它
納入了規範。IE、Firefox 9+和 Opera 支援這個事件。
5.mouseleave：在位於元素上方的滑鼠遊標移動到元素範圍之外時觸發。這個事件不冒泡，而且
在遊標移動到後代元素上不會觸發。DOM2 級事件並沒有定義這個事件，但 DOM3 級事件將它
納入了規範。IE、Firefox 9+和 Opera 支援這個事件。
6.mousemove：當滑鼠指針在元素內部移動時重複地觸發。不能通過鍵盤觸發這個事件。
7.mouseout：在滑鼠指針位於一個元素上方，然後使用者將其移入另一個元素時觸發。又移入的另
一個元素可能位於前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤觸發這個事件。
8.mouseover：在滑鼠指針位於一個元素外部，然後使用者將其首次移入另一個元素邊界之內時觸
發。不能通過鍵盤觸發這個事件。
9.mouseup：在使用者釋放滑鼠按鈕時觸發。不能通過鍵盤觸發這個事件。

鍵盤事件

1.keydown：當使用者按下鍵盤上的任意鍵時觸發，而且如果按住不放的話，會重複觸發此事件。
2.keypress：當使用者按下鍵盤上的字元鍵時觸發，而且如果按住不放的話，會重複觸發此事件。
按下 Esc 鍵也會觸發這個事件。Safari 3.1 之前的版本也會在使用者按下非字元鍵時觸發 keypress
事件。
3.keyup：當使用者釋放鍵盤上的鍵時觸發