ECMAScript 部分
ECMAScript是一個標准，JS只是它的一個實現，其他實現包括ActionScript;
“ECMAScript可以為不同種類的宿主環境提供核心的腳本編程能力”，即ECMAScript不與具體的宿主環境相綁定，如JS的宿主環境是瀏覽器，AS的宿主環境是Flash;
ECMAScript描述了以下內容：語法、類型、語句、關鍵字、保留字、運算符、對象。
1、JavaScript中的類型轉換 2、作用域、作用域鏈和閉包 3、函數與函數表達式 4、arguments對象 5、call與apply的應用 6、callee與caller的應用 7、原型和原型鏈 8、面向對象與繼承 9、this的理解 10、引用/深淺拷貝/JavaScript中的參數傳遞規則 11、Object原型中的函數及應用 12、Object靜態方法的應用 13、Array相關API的應用 14、Date相關API的應用 15、異步編程
DOM
DOM 全稱是 Document Object Model，也就是文檔對象模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和接口，是HTML和XML的API，DOM把整個頁面規划成由節點層級構成的文檔。針對XHTML和HTML的DOM。這個DOM定義了一個HTMLDocument和HTMLElement做為這種實現的基礎,就是說為了能以編程的方法操作這個 HTML 的內容（比如添加某些元素、修改元素的內容、刪除某些元素），我們把這個 HTML 看做一個對象樹（DOM樹），它本身和里面的所有東西比如 <div></div> 這些標簽都看做一個對象，每個對象都叫做一個節點（node），節點可以理解為 DOM 中所有 Object 的父類。
- DOM 是 W3C的標准；[所有瀏覽器公共遵守的標准];
- DOM（文檔對象模型）是 HTML 和 XML 的應用程序接口（API）。
1、DOMReady 2、DOM操作。增刪改查遍歷 3、DOM繼承層級 5、DOM類型與相應的API 6、事件與事件流 7、瀏覽器兼容性
如圖所示為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值分別為1、2、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
1、Touch事件簡介
pc上的web頁面鼠 標會產生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移動終端如iphone、ipod Touch、ipad上的web頁面觸屏時會產生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分別對應了觸屏開始、拖拽及完成觸屏事件和取消。
當按下手指時，觸發ontouchstart；
當移動手指時，觸發ontouchmove；
當移走手指時，觸發ontouchend。
當一些更高級別的事件發生的時候（如電話接入或者彈出信息）會取消當前的touch操作，即觸發ontouchcancel。一般會在ontouchcancel時暫停游戲、存檔等操作。
2、Touch事件與Mouse事件的出發關系
在觸屏操作后，手指提起的一剎那（即發生ontouchend后），系統會判斷接收到事件的element的內容是否被改變，如果內容被改變，接下來的事 件都不會觸發，如果沒有改變，會按照mousedown，mouseup，click的順序觸發事件。特別需要提到的是，只有再觸發一個觸屏事件時，才會 觸發上一個事件的mouseout事件。
借用前輩的知識，梳理下：
（1）DOM結構圖
（2）window對象
