Javascript組成--ECMAScript，DOM，BOM

時間 2019-12-09

標籤 javascript 組成 ecmascript dom bom 欄目 JavaScript 简体版

原文原文鏈接

ECMAScript 部分css

　　ECMAScript是一個標準，JS只是它的一個實現，其餘實現包括ActionScript;html

　　「ECMAScript能夠爲不一樣種類的宿主環境提供核心的腳本編程能力」，即ECMAScript不與具體的宿主環境相綁定，如JS的宿主環境是瀏覽器，AS的宿主環境是Flash;html5

　　ECMAScript描述瞭如下內容：語法、類型、語句、關鍵字、保留字、運算符、對象。java

1、JavaScript中的類型轉換
2、做用域、做用域鏈和閉包
3、函數與函數表達式
4、arguments對象
5、call與apply的應用
6、callee與caller的應用
7、原型和原型鏈
8、面向對象與繼承
9、this的理解
十、引用/深淺拷貝/JavaScript中的參數傳遞規則
11、Object原型中的函數及應用
12、Object靜態方法的應用
13、Array相關API的應用
14、Date相關API的應用
15、異步編程

DOMnode

　　DOM 全稱是 Document Object Model，也就是文檔對象模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和接口，是HTML和XML的API，DOM把整個頁面規劃成由節點層級構成的文檔。針對XHTML和HTML的DOM。這個DOM定義了一個HTMLDocument和HTMLElement作爲這種實現的基礎,就是說爲了能以編程的方法操做這個 HTML 的內容（好比添加某些元素、修改元素的內容、刪除某些元素），咱們把這個 HTML 看作一個對象樹（DOM樹），它自己和裏面的全部東西好比 <div></div> 這些標籤都看作一個對象，每一個對象都叫作一個節點（node），節點能夠理解爲 DOM 中全部 Object 的父類。web

DOM 是 W3C的標準；[全部瀏覽器公共遵照的標準];
DOM（文檔對象模型）是 HTML 和 XML 的應用程序接口（API）。

1、DOMReady
2、DOM操做。增刪改查遍歷
3、DOM繼承層級
5、DOM類型與相應的API
6、事件與事件流
七、瀏覽器兼容性

如圖所示爲DOM結構示意圖：編程

　　DOM模型將整個文檔（XML文檔和HTML文檔）當作一個樹形結構，在DOM中，HTML文檔的層次結構被表示爲一個樹形結構。並用document對象表示該文檔，樹的每一個子節點表示HTML文檔中的不一樣內容。每一個載入瀏覽器的 HTML 文檔都會成爲Document對象,Document是探索DOM的入口,利用全局變量document能夠訪問Document對象。瀏覽器

　　DOM經過建立樹來表示文檔，描述了處理網頁內容的方法和接口，從而使開發者對文檔的內容和結構具備空前的控制力，用DOM API能夠輕鬆地刪除、添加和替換節點。緩存

DOM節點類型

　　DOM規定文檔中的每一個成分都是一個節點（Node）,HTML文檔能夠說由節點構成的集合，DOM節點有:服務器

　　1. 元素節點（Element）：上圖中<html>、<body>、<p>等都是元素節點，即標籤。

　　2. 文本節點（Text）:向用戶展現的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

　　3. 屬性節點（Attr）:元素屬性，元素纔有屬性,如<a>標籤的連接屬性href="http://www.baidu.com"。

DOM節點三大屬性（XML DOM）

　　1. nodeName：元素節點、屬性節點、文本節點分別返回元素的名稱、屬性的名稱和#text的字符串。

　 2. nodeType：元素節點、屬性節點、文本節點的nodeType值分別爲一、二、3.、

　　3. nodeValue：元素節點、屬性節點、文本節點的返回值分別爲null、屬性值和文本節點內容。

DOM常見操做

1. 獲取/設置節點--包括獲取/設置元素節點、屬性節點、文本節點：

　　　　獲取元素節點：document.getElementById("ID")；

　　　　獲取屬性節點：getAttributeNode(attrName)；

　　　　獲取文本節點：parentNode/childNodes；

　　　　設置元素節點： innerHTML屬性（innerText屬性返回去掉標籤的innerHTML）；

　　　　設置屬性節點： setAttribute(attrName,value);

　　　　設置文本節點：經過改變文本節點的nodeValue來設置文本節點的值；

2. 刪除節點

　　刪除元素節點： removeChild();

　　刪除屬性節點：removeAttribute();

　　刪除文本節點：textNode.nodeValue='';

3. 建立和添加節點

　　建立節點：經過document對象的createElement(eleName)、createTextNode(nodeValue)方法可分別建立元素節點和文本節點。屬性節點也有本身的create方法，可是用的少，直接用元素節點的setAttribute()方法便可添加屬性。

　　添加節點：appendChild()和insertBefore()

DOM事件

　　DOM同時兩種事件模型：冒泡型事件和捕獲型事件。冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標的順序觸發；捕獲型事件：與冒泡事件相反的過程，事件從最不精確的對象開始觸發，而後到最精確。

DOM事件類型

鼠標事件：click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove
鍵盤事件：keydown、keypress、keyup
HTML事件：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur

事件處理程序

　　事件就是用戶或瀏覽器自身執行的某種動做。好比click,mouseup,keydown,mouseover等都是事件的名字。而響應某個事件的函數就叫事件處理程序（事件監聽器），事件處理程序以on開頭，所以click的事件處理程序就是onclick。

DOM 0級事件處理程序：把一個函數賦值給一個事件的處理程序屬性。

<input type="button" value="按鈕2" id="ben2"/>
<script>   
   var btn2=document.getElementById('btn2');//得到btn2按鈕對象
    btn2.onclick=function(){} //添加匿名函數
    btn2.onclick=null      //刪除onclick屬性
</script>

DOM 2級事件處理程序

　　DOM 2級事件定義了兩個方法，用於指定和刪除事件處理程序的操做。addEventListener()和removeEventListener()

BOM

BOM 是各個瀏覽器廠商根據 DOM,在各自瀏覽器上的實現;[表現爲不一樣瀏覽器定義有差異,實現方式不一樣]；
window 是 BOM對象，而非js對象，location也是BOM的一個對象；
BOM 爲了控制瀏覽器的行爲而出現的接口，主要處理瀏覽器窗口和框架，不過一般瀏覽器特定的 JavaScript 擴展都被看作 BOM 的一部分。這些擴展包括：
- 彈出新的瀏覽器窗口；
- 移動、關閉瀏覽器窗口以及調整窗口大小；
- 提供 Web 瀏覽器詳細信息的定位對象；　
- 提供用戶屏幕分辨率詳細信息的屏幕對象；
- 跳轉到另外一個頁面、前進、後退

Document　　當瀏覽器下載到一個網頁，一般是 HTML，這個 HTML 就叫 document（固然，這也是 DOM 樹中的一個 node），從上圖能夠看到，document 一般是整個 DOM 樹的根節點。這個 document 包含了標題（document.title）、URL（document.URL）等屬性，能夠直接在 JS 中訪問到。

在一個瀏覽器窗口中可能有多個 document，例如，經過 iframe 加載的頁面，每個都是一個 document。
在 JS 中，能夠經過 document 訪問其子節點（其實任何節點均可以），如 document.body;document.getElementById('xxx');

BOM與DOM的關係

　　javacsript是經過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)，因爲BOM的window包含了document，window對象的屬性和方法是直接可使用並且被感知的，所以能夠直接使用window對象的document屬性，經過document屬性就能夠訪問、檢索、修改XHTML文檔內容與結構。由於document對象又是DOM（Document Object Model）模型的根節點。能夠說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js能夠操做瀏覽器以及瀏覽器讀取到的文檔。其中

DOM包含：window
Window對象包含屬性：document、location、navigator、screen、history、frames
Document根節點包含子節點：forms、location、anchors、images、links

從window.document已然能夠看出，DOM的最根本的對象是BOM的window對象的子對象。DOM 是爲了操做文檔出現的 API，document 是其的一個對象；BOM 是爲了操做瀏覽器出現的 API，window 是其的一個對象。

屬於DOM的：

　　E區（就是你說的document啦。由web開發人員嘔心瀝血寫出來的一個文件夾，裏面有index.html，CSS和JS什麼鬼的，部署在服務器上，咱們能夠經過瀏覽器的地址欄輸入URL而後回車將這個document加載到本地，瀏覽，右鍵查看源代碼等。

屬於BOM的：

A區（瀏覽器的標籤頁，地址欄，搜索欄，書籤欄，窗口放大還原關閉按鈕，菜單欄等等）

B區（瀏覽器的右鍵菜單）

C區（document加載時的狀態欄，顯示http狀態碼等）

D區（滾動條scroll bar）

下圖爲BOM的結構示意圖：

Window對象

Window 對象是 JavaScript層級中的頂層對象。
Window 對象表明一個瀏覽器窗口或一個框架。
Window 對象會在 <body>或<frameset>每次出現時被自動建立。

　　window對象屬性

　　　　1. window //窗戶自身, window=window.self可以使用全局屬性window訪問　Window對象

　　　　2. document 對 Document 對象的只讀引用。請參閱Document對象。

　　　　3. history 對 History 對象的只讀引用。請參數History對象。

　　　　4. location 用於窗口或框架的 Location 對象。請參閱Location對象。

　　　　5. screen 對 Screen 對象的只讀引用。請參數Screen對象。

　　　　6. navigator 對 Navigator 對象的只讀引用。請參數Navigator對象。

　　　　7. defaultStatus 設置或返回窗口狀態欄中的默認文本。

　　　　8. innerheight 返回窗口的文檔顯示區的高度。

　　　　9. innerwidth 返回窗口的文檔顯示區的寬度。

　　　　10. outerheight 返回窗口的外部高度。

　　　　11. outerwidth 返回窗口的外部寬度。

　　　　12. pageXOffset 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。

　　　　13. pageYOffset 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。

　　　　14. name 設置或返回窗口的名稱。

　　　　15. parent 返回父窗口。

　　　　16. top 返回最頂層的先輩窗口。

　　　　17. status 設置窗口狀態欄的文本。

　　對象方法

　　　　1. window.close(); //關閉窗口

　　　　2. window.alert("message"); //彈出一個具備OK按鈕的系統消息框，顯示指定的文本

　　　　3. window.confirm("Are you sure?"); //彈出一個具備OK和Cancel按鈕的詢問對話框，返回一個布爾值

　　　　4. window.prompt("What's your name?", "Default"); //提示用戶輸入信息，接受兩個參數，即要顯示給用戶的文本和文本框中的默認值，將文本框中的值做爲函數值返回

　　　　5. window.status //可使狀態欄的文本暫時改變

　　　　6. window.defaultStatus //默認的狀態欄信息，可在用戶離開當前頁面前一直改變文本

　　　　7. window.setTimeout("alert('xxx')", 1000); //設置在指定的毫秒數後執行指定的代碼，接受2個參數，要執行的代碼和等待的毫秒數

　　　　8. window.clearTimeout("ID"); //取消還未執行的暫停，將暫停ID傳遞給它

　　　　9. window.setInterval(function, 1000); //無限次地每隔指定的時間段重複一次指定的代碼，參數同setTimeout()同樣

　　　　10. window.clearInterval("ID"); //取消時間間隔，將間隔ID傳遞給它

　　　　11. window.history.go(-1); //訪問瀏覽器窗口的歷史，負數爲後退，正數爲前進

　　　　12. window.history.back(); //同上

　　　　13. window.history.forward(); //同上

　　　　14. window.history.length //能夠查看歷史中的頁面數

　　　　15. clearInterval() 取消由 setInterval() 設置的timeout。

　　　　16. clearTimeout() 取消由 setTimeout() 方法設置的timeout。

　　　　17. createPopup() 建立一個 pop-up 窗口。

　　　　18. moveBy() 可相對窗口的當前座標把它移動指定的像素。

　　　　19. moveTo() 把窗口的左上角移動到一個指定的座標。

　　　　20. open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。

　　　　21. print() 打印當前窗口的內容。

　　　　22. resizeBy() 按照指定的像素調整窗口的大小。

　　　　23. resizeTo() 把窗口的大小調整到指定的寬度和高度。

　　　　24. scrollBy() 按照指定的像素值來滾動內容。

　　　　25. scrollTo() 把內容滾動到指定的座標。

　　　　26. setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。

　　　　27. setTimeout(方法,秒數) 在指定的毫秒數後調用函數或計算表達式。　

　　　　28. timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定時器傳參數

成員對象

　　window.event

　　window.document //見document對象詳解

　　window.history

　　window.screen

　　window.navigator

　　Window.external

screen對象

screen對象：用於獲取某些關於用戶屏幕的信息，也可用window.screen引用它
window.screen.width //屏幕寬度
window.screen.height //屏幕高度
window.screen.colorDepth //屏幕顏色深度
window.screen.availWidth //可用寬度(除去任務欄的高度)
window.screen.availHeight //可用高度(除去任務欄的高度)

external對象

window.external.AddFavorite("地址","標題" ) //把網站新增到保藏夾

navigator對象

navigator`對象：包含大量有關Web瀏覽器的信息，在檢測瀏覽器及操做系統上很是有用

window.navigator.appCodeName //瀏覽器代碼名
window.navigator.appName //瀏覽器步伐名
window.navigator.appMinorVersion //瀏覽器補釘版本
window.navigator.cpuClass //cpu類型x86
window.navigator.platform //操做體系類型win32
window.navigator.plugins
window.navigator.opsProfile
window.navigator.userProfile
window.navigator.systemLanguage //客戶體系語言zh-cn簡體中文
window.navigator.userLanguage //用戶語言,同上
window.navigator.appVersion //瀏覽器版本(包括體系版本)
window.navigator.userAgent//用戶代理頭的字符串表示
window.navigator.onLine //用戶否在線
window.navigator.cookieEnabled //瀏覽器是否撐持cookie
window.navigator.mimeTypes

Document對象

1）對象屬性

document.body//提供對 <body>元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的<frameset>。

document.cookie 返回與當前文檔有關的全部 cookie。

document.title //返回文檔標題等價於HTML的title標籤

document.domain 返回當前文檔的域名。

document.bgColor //返回頁面背景色

document.fgColor //返回前景色(文本顏色)

document.linkColor //未點擊過的連接顏色

document.alinkColor //激活連接(焦點在此連接上)的顏色

document.vlinkColor //已點擊過的連接顏色

document.URL //設置URL屬性從而在同一窗口打開另外一網頁

document.fileCreatedDate //文件創建日期，只讀屬性

document.fileModifiedDate //文件修改日期，只讀屬性

document.lastModified 返回文檔被最後修改的日期和時間。

document.fileSize //文件大小，只讀屬性

document.cookie //設置和讀出cookie

document.charset //返回字符集簡體中文:gb2312

document.URL 返回當前文檔的 URL。

document.referrer 返回載入當前文檔的文檔的 URL。

document.styleSheets 返回樣式表的集合,返回值CSSStyleSheet[]

document.styleSheets[0].cssRules.style.paddingTop=」10px」設置樣式,樣式名去掉連字符,

2）經常使用對象方法

document.write() //動態向頁面寫入內容

document.writeln() 等同於 write() 方法，不一樣的是在每一個表達式以後寫一個換行符。

document.createElement(<Tag>) //用指定標籤類型建立一個新的element對象)

document.getElementById(ID) //得到指定ID值的對象

document.getElementsByName(Name) //得到指定Name值的對象

getElementsByTagName() 返回帶有指定標籤名的對象集合。

document.body.appendChild(oTag)

———————————————————————

3）body-主體子對象

document.body //指定文檔主體的開始和結束等價於body>/body>

document.body.bgColor //設置或獲取對象後面的背景顏色

document.body.link //未點擊過的連接顏色

document.body.alink //激活連接(焦點在此連接上)的顏色

document.body.vlink //已點擊過的連接顏色

document.body.text //文本色

document.body.innerText //設置body>…/body>之間的文本

document.body.innerHTML //設置body>…/body>之間的HTML代碼

document.body.topMargin //頁面上邊距

document.body.leftMargin //頁面左邊距

document.body.rightMargin //頁面右邊距

document.body.bottomMargin //頁面下邊距

document.body.background //背景圖片

document.body.appendChild(oTag) //動態生成一個HTML對象

4）經常使用對象事件

document.body.onclick=」func()」//鼠標指針單擊對象是觸發

document.body.onmouseover=」func()」//鼠標指針移到對象時觸發

document.body.onmouseout=」func()」//鼠標指針移出對象時觸發

———————————————————————

5）location-位置子對象

location對象：表示載入窗口的URL，也可用window.location引用它

location.href //當前載入頁面的完整URL，如http://www.somewhere.com/pictures/index.htm

location.portocol //URL中使用的協議，即雙斜槓以前的部分，如http

location.host //服務器的名字，如www.wrox.com

location.hostname //一般等於host，有時會省略前面的www

location.port //URL聲明的請求的端口，默認狀況下，大多數URL沒有端口信息，如8080

location.pathname //URL中主機名後的部分，如/pictures/index.htm

location.search //執行GET請求的URL中的問號後的部分，又稱查詢字符串，如?param=xxxx

location.hash //若是URL包含#，返回該符號以後的內容，如#anchor1

location.assign("http:www.baidu.com"); //同location.href，新地址都會被加到瀏覽器的歷史棧中

location.replace("http:www.baidu.com"); //同assign()，但新地址不會被加到瀏覽器的歷史棧中，不能經過back和forward訪問

location.reload(true | false); //從新載入當前頁面，爲false時從瀏覽器緩存中重載，爲true時從服務器端重載，默認爲false

document.location.reload(URL) //打開新的網頁

6）selection-選區子對象

document.selection

7）forms集合(頁面中的表單)

a)經過集合引用

document.forms //對應頁面上的form標籤

document.forms.length //對應頁面上/formform標籤的個數

document.forms[0] //第1個/formform標籤

document.forms[i] //第i-1個/formform標籤

document.forms[i].length //第i-1個/formform中的控件數

document.forms[i].elements[j] //第i-1個/formform中第j-1個控件

b)經過標籤name屬性直接引用

/formform name=」Myform」>input name=」myctrl」/>/form

document.Myform.myctrl //document.表單名.控件名

c)訪問表單的屬性

document.forms[i].name //對應form name>屬性

document.forms[i].action //對應/formform action>屬性

document.forms[i].encoding //對應/formform enctype>屬性

document.forms[i].target //對應/formform target>屬性

document.forms[i].appendChild(oTag) //動態插入一個控件

document.all.oDiv //引用圖層oDiv

document.all.oDiv.style.display=」 //圖層設置爲可視

document.all.oDiv.style.display=」none」//圖層設置爲隱藏

document.getElementId(」oDiv」) //經過getElementId引用對象

document.getElementId(」oDiv」).style=」

document.getElementId(」oDiv」).display=」none」

/*document.all表示document中全部對象的集合

只有ie支持此屬性，所以也用來判斷瀏覽器的種類*/

....

HTMLElement對象

HTML DOM 節點

在 HTML DOM （文檔對象模型）中，每一個部分都是節點：

1.文檔自己是文檔節點

2.全部 HTML元素是元素節點

3.全部 HTML屬性是屬性節點

4.HTML 元素內的文本是文本節點

5.註釋是註釋節點

Element 對象

在 HTML DOM 中，Element對象表示HTML元素。

Element 對象能夠擁有類型爲元素節點、文本節點、註釋節點的子節點。

NodeList 對象表示節點列表，好比 HTML元素的子節點集合。

元素也能夠擁有屬性。屬性是屬性節點

獲取

document.getElementById(ID) //得到指定ID值的對象

document.getElementsByName(Name) //得到指定Name值的對象

getElementsByTagName() 返回帶有指定標籤名的對象集合。

屬性和方法

方法裏有a,b的參數僅僅是爲了加深說明,其餘元素沒有a,b不表明是無參方法

Element.add(<class>)給元素添加指定的類

element.accessKey 設置或返回元素的快捷鍵。

element.appendChild() 向元素添加新的子節點，做爲最後一個子節點。

element.attributes 返回元素屬性的集合。

element.childNodes 返回元素子節點的 NodeList。

element.className 設置或返回元素的 class 屬性。

element.clientHeight 返回元素的可見高度。

element.clientWidth 返回元素的可見寬度。

element.cloneNode() 克隆元素。

element.compareDocumentPosition() 比較兩個元素的文檔位置。

element.contentEditable 設置或返回元素的文本方向。

element.dir 設置或返回元素的文本方向。

element.firstChild 返回元素的首個子。

element.getAttribute() 返回元素節點的指定屬性值。

element.getAttributeNode() 返回指定的屬性節點。

element.getElementsByTagName() 返回擁有指定標籤名的全部子元素的集合。

element.getFeature() 返回實現了指定特性的 API 的某個對象。

element.getUserData() 返回關聯元素上鍵的對象。

Element.hidden獲取或設置hidden屬性的存在狀態

element.hasAttribute() 若是元素擁有指定屬性，則返回true，不然返回false。

element.hasAttributes() 若是元素擁有屬性，則返回 true，不然返回false。

element.hasChildNodes() 若是元素擁有子節點，則返回 true，不然false。

element.id 設置或返回元素的 id。

element.innerHTML 設置或返回元素的內容。

element.insertBefore(<a>,<b>) 在指定的已有的子節點以前插入新節點。A插到b前

element.isContentEditable 設置或返回元素的內容。

element.isDefaultNamespace() 若是指定的 namespaceURI是默認的，則返回true，不然返回false。

element.isEqualNode(<a>) 檢查a元素是否與當前元素相等。

element.isSameNode(a) 檢查指定元素是否就是當前元素.

element.isSupported() 若是元素支持指定特性，則返回 true。

element.lang 設置或返回元素的語言代碼。

element.lastChild 返回元素的最後一個子元素。

element.namespaceURI 返回元素的 namespace URI。

element.nextSibling 返回當前元素以後的兄弟元素

element.nodeName 返回元素的名稱。

element.nodeType 返回元素的節點類型。

element.nodeValue 設置或返回元素值。

element.normalize() 合併元素中相鄰的文本節點，並移除空的文本節點。

element.offsetHeight 返回元素的高度。

element.offsetWidth 返回元素的寬度。

element.offsetLeft 返回元素的水平偏移位置。

element.offsetParent 返回元素的偏移容器。

element.offsetTop 返回元素的垂直偏移位置。

element.ownerDocument 返回元素的根元素（文檔對象）。

element.parentNode 返回元素的父節點。

element.previousSibling 返回當前元素以前的兄弟元素

Element.remove(<class>) 從元素移除指定的類

element.removeAttribute() 從元素中移除指定屬性。

element.removeAttributeNode() 移除指定的屬性節點，並返回被移除的節點。

element.removeChild(a) 從元素中移除子節點。

element.replaceChild(a,b) 替換元素中的子節點。

element.scrollHeight 返回元素的總體高度。

element.scrollLeft 返回元素左邊緣與視圖之間的距離。

element.scrollTop 返回元素上邊緣與視圖之間的距離。

element.scrollWidth 返回元素的總體寬度。

element.setAttribute() 把指定屬性設置或更改成指定值。

element.setAttributeNode() 設置或更改指定屬性節點。

element.setIdAttribute()

element.setIdAttributeNode()

element.setUserData() 把對象關聯到元素上的鍵。

element.style 設置或返回元素的 style 屬性。

Element.toggle(<class>)若是類不存在就添加它存在就移除它

element.tabIndex 設置或返回元素的 tab 鍵控制次序。

element.tagName 返回元素的標籤名。

element.textContent 設置或返回節點及其後代的文本內容。

element.title 設置或返回元素的 title 屬性。

element.toString() 把元素轉換爲字符串。

nodelist.item() 返回 NodeList 中位於指定下標的節點。

nodelist.length 返回 NodeList 中的節點數。

Event對象

1）Event對象的經常使用屬性

名稱	說明	返回
type	事件的名稱如mouseover	字符串
target	事件指向的元素	HTMLElement

2）Window 事件屬性

(沒加藍的都是h 5新事件)

針對 window 對象觸發的事件（應用到<body>標籤）：

屬性

onafterprint 文檔打印以後運行的腳本。

onbeforeprint 文檔打印以前運行的腳本。

onbeforeunload 文檔卸載以前運行的腳本。

onerror 在錯誤發生時運行的腳本。

onhaschange 當文檔已改變時運行的腳本。

onload 頁面結束加載以後觸發。

onmessage 在消息被觸發時運行的腳本。

可使用調用 postMessage ()向主線程發送消息,在某些場景下，業務調用方可能須要主動跟定位組件通訊,能夠經過html5 postMessage的方式主動與定位組件發起通訊

onoffline 當文檔離線時運行的腳本。

ononline 當文檔上線時運行的腳本。

onpagehide 當窗口隱藏時運行的腳本。

onpageshow 當窗口成爲可見時運行的腳本。

onpopstate 當窗口歷史記錄改變時運行的腳本。

onredo 當文檔執行撤銷（redo）時運行的腳本。

onresize 當瀏覽器窗口被調整大小時觸發。

onstorage 在 Web Storage 區域更新後運行的腳本。

onundo 在文檔執行 undo 時運行的腳本。

onunload 一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。

3）Form 事件

由 HTML 表單內的動做觸發的事件（應用到幾乎全部HTML元素，但最經常使用在form元素中）：

屬性

onblur 元素失去焦點時運行的腳本。

onchange在元素值被改變時運行的腳本。

oncontextmenu 當上下文菜單被觸發時運行的腳本。

onfocus 當元素失去焦點時運行的腳本。

onformchange 在表單改變時運行的腳本。

onforminput 當表單得到用戶輸入時運行的腳本。

oninput 當元素得到用戶輸入時運行的腳本。

oninvalid 當元素無效時運行的腳本。

onreset 當表單中的重置按鈕被點擊時觸發。HTML5中不支持。

onselect 在元素中文本被選中後觸發。

onsubmit 在提交表單時觸發。

4）oninput,onpropertychange,onchange的用法

oninput:

oninput 事件在用戶輸入時觸發。

該事件在 <input> 或<textarea>元素的值發生改變時觸發。

提示：該事件相似於 onchange 事件。不一樣之處在於oninput事件在元素值發生變化是當即觸發，onchange在元素失去焦點時觸發。另一點不一樣是onchange事件也能夠做用於<keygen>和<select>元素。

onchange

onchange 事件會在域的內容改變時發生。

onchange 事件也可用於單選框與複選框改變後觸發的事件。

onchange觸發事件必須知足兩個條件：

a）當前對象屬性改變，而且是由鍵盤或鼠標事件激發的（腳本觸發無效）

b）當前對象失去焦點(onblur)；

onpropertychange的話，只要當前對象屬性發生改變，都會觸發事件，可是它是IE專屬的；

oninput是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點不一樣，它綁定於對象時，並不是該對象全部屬性改變都能觸發事件，它只在對象value值發生改變時奏效。

在textarea中，若是想捕獲用戶的鍵盤輸入，用onkeyup檢查事件就能夠了，可是onkeyup並不支持複製和粘貼，所以須要動態監測textarea中值的變化，這就須要onpropertychange（用在IE瀏覽器）和oninput（非IE瀏覽器）結合在一塊兒使用了。

5）移動端觸摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

一、Touch事件簡介

pc上的web頁面鼠標會產生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，可是在移動終端如iphone、ipod Touch、ipad上的web頁面觸屏時會產生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分別對應了觸屏開始、拖拽及完成觸屏事件和取消。

當按下手指時，觸發ontouchstart；

當移動手指時，觸發ontouchmove；

當移走手指時，觸發ontouchend。

當一些更高級別的事件發生的時候（如電話接入或者彈出信息）會取消當前的touch操做，即觸發ontouchcancel。通常會在ontouchcancel時暫停遊戲、存檔等操做。

二、Touch事件與Mouse事件的出發關係

在觸屏操做後，手指提起的一剎那（即發生ontouchend後），系統會判斷接收到事件的element的內容是否被改變，若是內容被改變，接下來的事件都不會觸發，若是沒有改變，會按照mousedown，mouseup，click的順序觸發事件。特別須要提到的是，只有再觸發一個觸屏事件時，纔會觸發上一個事件的mouseout事件。

借用前輩的知識，梳理下：

（1）DOM結構圖

（2）window對象