1.Javascript組成 JavaScript的實作包括以下 3 個部分：
的 語法和基本物件 。 ）文件物件模型（ DOM 2）文件物件模型（
DOM
）： 處理網頁內容 的方法與介面）瀏覽器物件模型（
的方法與介面擴充知識：
① ECMAScript是一個標準，① ECMAScript 是一個標準，只是實作一個標準
。 ② “ ECMAScript環境是瀏覽器，
AS
的宿主環境是 Flash 。 ECMAScript 描述了以下內容：語法、類型、語句、關鍵字、保留字、運算子、物件。 我們都知道， javascript
有三部分構成，ECMAScript，DOM和BOM，根據宿主（瀏覽器）的不同，具體的表現形式也不盡其他的瀏覽器風格迥異。
是
的標準；
[所有瀏覽器公共遵守的標準
]瀏覽器上的實作
;[是物件； DOM（文件物件模型）是HTML 和XML 的應用程式介面（API）。 BOM 主要處理瀏覽器視窗和框架，不過通常瀏覽器特定的 JavaScript 擴充功能都被看做 BOM 的一部分。這些擴充功能包括： Web 屏幕提供使用者螢幕解析度詳細資料的使用者螢幕螢幕物件 對 cookie
IE 扩展了 BOM ，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象
javacsript是通过访问BOM（Browser Object Model ）对象来访问、控制、修改客户端 ( 浏览器 ) ，由于 BOM的window包含了document，window 对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用 window对象的document属性，通过document属性就可以访问、检索、修改XHTML 文档内容与结构。因为 document对象又是DOM （ Document
Object Model ）模型的根节点。可以说， BOM 包含了 DOM(对象 ) ，浏览器提供出来给予访问的是 BOM 对象，从 BOM 对象再访问到 DOM对象，从而js 可以操作浏览器以及浏览器读取到的文档。其中 包含： window
Window对象包含属性： document 、 location 、 navigator 、 screen 、 history 、 frames
Document根节点包含子节点： forms 、 location 、 anchors 、 images 、 links
从window.document已然可以看出，DOM 的最根本的对象是 BOM 的 window 对象的子对象。
区别 ：DOM 描述了处理网页内容的方法和接口， BOM 描述了与浏览器进行交互的方法和接口
1.1 DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容 （比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如
這些標籤都看做一個對象，每個對像都叫做一個節點（node），節點可以理解為 DOM 中所有 Object 的父類。
DOM 有什麼用？就是為了操作HTML 中的元素，比如說我們要透過JS 把這個網頁的標題改了，直接這樣就可以了：
document.title = 'how to make love';
這個API 使得在網頁上被下載到瀏覽器之後改變網頁的內容成為可能。 document
document.body;document.getElementById('xxx');
BOM BOM
是
，
為了控制瀏覽器的行為 而出現的接口。
location.href = "http://www.xxxx.com";
window
window.close();
DOM 是為了操作文檔出現的API，document 是其的一個物件； DOM 是為了操作文件出現的API，document 是其的一個物件；
BOM 是為了操作瀏覽器出現的API，window 是其的一個物件。
DOM
web車將這個 document 加載到本地，瀏覽，右鍵查看原始碼等。 。狀態列，顯示 http 狀態碼等）
區（捲軸
scroll bar BOM
和
DOM
的結構關係示意圖
2.文件物件模型(DOM) DOM節點樹模型（以 HTML DOM 樹為例）
HTML
文檔）看成一個樹狀結構， DOM 中， HTML
文檔的樹狀結構被表示為一個體形結構。
並以document 物件表示該文件 ，樹的每個子節點表示HTML 文件中的不同內容。 HTML 文件都會成為 Documen t
物件
,Document t物件 ,Document 是探索的全域變數 document 可以存取 Document 物件 2.1認識 DOM為DOM節點層級圖:
DOM透過創建樹來表示文檔，描述了處理網頁內容的方法和接口，從而使開發者對文檔的內容和結構具有空前的控制力，用DOM API可以輕鬆地刪除、添加和替換節點。
1）節點類型 DOM 規定文件中的每個成分都是一個節點（
Node
）
,HTML
:
元素節點（
Element
）：上圖
、
>等。 ，即標籤。 2. 文字節點（
... 向使用者展示的內容，如
... ScriptDOM 、 CSS 等文字。 屬性節點（ Attr ）
:
元素屬性，元素才有屬性 ,如元素屬性，元素才有屬性 ,如
1） DOM 節點三大屬性（ XML DOM ） 1） ）） ）
1）和 #text 的字串。 ） nodeType ：元素節點、屬性節點、文字節點的 nodeType 值分別為 1 nodeType
、
3） nodeValue ：元素節點、屬性節點、文字節點的回傳值分別為 null
、屬性值、文字節點內容。
為所有節點的父接口，其定義了一組公共的屬性和方法，如下：
） ① 取得元素節點：透過
document.getElementById("ID") document.getElementByName("name")
document.getElementByName("name")
document.getElementByName("name")
.A. ② 取得屬性節點：屬性節點附屬於元素節點，可透過元素節點的
getAttributeNode(attrName)方法取得屬性節點，也可透過 getAttribute(attrName)直接取得屬性值。 （與之相對的是 Element
③ 取得文字節點：文字節點為元素節點的子節點，可透過元素節點（
Element
childNodes //NodeList，所有子節點的列表
firstChild //Node，指向在childNodes列表中的第一個節點
lastChild //Node，指向在childNodes列表中的最後一個節點
lastChild //Node，指向在childNodes？ /Node，指向父節點
previousSibling /Node，/指向前一個兄弟節點：如果這個節點是第一個節點，那麼該值為null
nextSibling //Node，指向後一個兄弟節點：如果這個節點就是最後一個節點，那麼值為null
hasChildNodes()` //Boolean，當childNodes包含一個或多個節點時，傳回真值
① 改變屬性節點的值：可以透過屬性節點的直接修改屬性值，也可透過元素節點的
方法改變。 ② 改變文字節點的值：透過文字節點的 nodeValue
在
HTML DOM
屬性（ 拓展innerText: 表示起始标签和结束标签之间的文本
innerHTML: 表示元素的所有元素和文本的HTML代码
如：
Hello world
的innerText為Hello world，innerHTML為Hello world
outerText: 與前者的區別是替換的是整個目標節點，問題返回和innerText一樣的內容
outerHTML: 與前者的區別是替換的是整個目標節點，回傳元素完整的HTML程式碼，包含元素本身
一張圖片了解OUTHTML和innerText、innerHTML：
改變HTML 改變 color =
3
）刪除節點
A② 刪除屬性節點：可透過屬性節點所屬的元素節點的 removeAttribute(attrName)
removeAttributeNode(node)
③ 清空文字節點：最簡單也是最常用的方法就是直接設定文字節點的
nameNode
混淆點
🜎🜎
p.nodeValue //null,p是元素節點，所以
nodeo
p.getAttributeNode('id').nodeValue //example
，這裡取得
p 的 id 屬性
的
no
id
屬性 .childNodes[0].nodeValue //這是一段文字, p 是含有兩個子節點的，插入的文字雖然沒有標籤，但它依然是一個節點。 其型別是文字節點，其 nodeValue
p.innerHTML//這是一段文字>"
這裡
innerHTML
p
4）创建和添加节点 ① 创建节点：通过document 对象的 createElement(eleName) 、 createTextNode(nodeValue) 方法可分别创建元素节点和文本节点。属性节点也有自己的 create 方法，但是用的少，直接用元素节点的 setAttribute() 方法即可添加属性。
② 添加节点：两个重要的方法：appendChild() 和 insertBefore() ，具体见 Node 接口中的方法。
扩展：上面的两个方法都是在已知父节点时用到的，也可以直接在兄弟节点后添加新节点：x.insertBefore(newNode) 和 x.appendChild(newNode) 都可以向 x 后追加一个新的子节点。
5）替换节点 主要掌握replaceChild(newNode , oldNode) 替换元素节点。（属性节点和文本节点有更简单的方法）
2.3 DOM事件 DOM同时两种事件模型：冒泡型事件和捕获型事件
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发
Click Me
触发的顺序是：div 、 body 、 html(IE 6.0 和 Mozilla
1.0) 、 document 、 window(Mozilla 1.0)
捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确
上面例子触发的顺序是：document 、 div
DOM事件模型最独特的性质是，文本节点也触发事件 ( 在 IE 中不会 ) 。
1）事件处理函数/ 监听函数
在JavaScript中：
var oDiv = document.getElementById("div1");
oDiv.onclick = function(){ //onclick只能用小写
alert("Clicked!");
}
或者
var elem =document.getElementById(“id”)
elem.onmouseover=handleMouseOver //handleMouseOver 是函数名
Function handleMouseOve(e){...}
在HTML中：
//onclick大小寫任意
擴展:
IE事件處理程序attachEvent()和detachEvent()
在IE中，每個元素和window )和detachEvent()，這兩個方法接受兩個相同的參數，事件處理程序名稱和事件處理程序函數，如：
[object].attachEvent("name_of_event_handler","function_to_attach")
[object] .detachEvent("name_of_event_handler","function_to_remove")
var fnClick = function(){
alert("Clicked!");
}eg;處理函數
oDiv.attachEvent("onclick", fnClickAnother); // 可以加入多個事件處理函數
oDiv.detachEvent("onclick", fnClick); //移除事件處理函數
在使用)方法的情況下，事件處理程序會在全域作用域中運行，因此this等於window。
2）跨瀏覽器的事件處理程序
addHandler()方法屬於一個叫EventUntil()的對象，這兩種方法均接受三個相同的參數，要操作的元素，事件名稱和事件處理程序函數。
3）事件類型
鍵盤事件：keydown、keypress、keyseup🜵
、change、submit、reset、resize、scroll、focus、blur
4）事件處理器
執行JavaScript 程式碼的程式在事件發生時會對事件做出回應。為了回應一個特定事件 而被執行的程式碼稱為事件處理器。
在HTML標籤中使用事件處理器的語法是：
5）事件處理程序
DOM 0
級事件處理程序 "tn2" id="ben2"/>
var btn2=document.getElementById('btn2');取得btn2按鈕物件
btn2.onclick 物件
btn2.onclick 物件
btn2。
btn2.onclick=function(){
} //刪除onclick屬性
7）
DOM 2
級事件處理程序 [object].addEventListener("name_of_event",fnhander,bcapture)
[object].removeEventListener("name_of_event",fnlick,bcapture); ){
alert("Clicked!");
}
oDiv.addEventListener("onclick", fnClick, false); //新增事件處理函數
oDiv. ; // 與IE一樣，可以新增多個事件處理函數
oDiv.removeEventListener("onclick", fnClick, false); //移除事件處理函數
如果使用addEventListener()將事件處理函數加入到捕獲階段，則必須在removeEventListener()中指明是捕獲階段，才能正確地將這個事件處理函數刪除
oDiv.onclick = fnClick;
oDiv.onclick = fnClickAnother; //使用直接賦值，後續的事件處理函數會覆寫前面的處理函數
oDiv.onclick = fnClick;
oDiv.addEventListener("onclick", fnClickAnother, false); //會依序調用，不會覆寫
Another, false); //會依序調用，不會覆寫
3.瀏覽器物件模型 (BOM) BOM的核心是 window ，而有雙重存取 瀏覽器視窗的一個接口，又是一個
3.1Window對象
Window
Window 物件會在
或
window // 窗戶本身
可使用全域屬性存取
document 對 Document
物件的唯讀引用。請參閱history 對 History
location 用於視窗或框架的 Location
screen 對 Screen
navigator 對 Navigator
defaultStatus 設定或傳回視窗狀態列中的預設文字。 innerheight 傳回視窗的文檔顯示區的高度。 innerwidth 傳回視窗的文件顯示區的寬度。 outerheight 傳回視窗的外部高度。
outerwidth 傳回視窗的外部寬度。 pageXOffset 設定或傳回目前頁面相對於視窗顯示區左上角的 X pageYOffset 設定或傳回目前頁面相對於視窗顯示區左上角的 Y
位置。
name 設定或傳回視窗的名稱。
parent 返回父視窗。
top 傳回最頂層的先輩視窗。
status 設定視窗狀態列的文字。 window.location //URL 位址，配備佈置這個屬性可以開啟新的頁面
2）物件方法window.close(); // 關閉視窗
window.close(); //關閉視窗
message"); //
彈出一個具有
OK按鈕的系統訊息框，顯示指定的文字
window.confirm("Are you sure?"); //彈出一個 OK 和 Cancel 按鈕的詢問對話框，返回一個布林值
name?", "Default"); //提示使用者輸入訊息，接受兩個參數，即要顯示給使用者的文字和文字方塊中的預設值，將文字方塊中的值作為函數值傳回
window.status //可以使狀態列的文字暫時改變
window.defaultStatus //預設的狀態列訊息，可在使用者離開目前頁面前一直改變文字
window.setTimeout("alert(' xxx')", 1000); //設定在指定的毫秒數後執行指定的程式碼，接受
window.clearTimeout("ID "); //取消還未執行的暫停，將暫停
window.setInterval(function, 1000); //無限次地每隔指定的時間段重複一次指定的程式碼，參數同
window.clearInterval("ID"); //取消時間間隔，將間隔. (-1); // 訪問瀏覽器視窗的歷史，負數為後退，正數為前進
window.history.back(); //同上
window.history.forward(); / /同上
window.history.length //可以查看歷史中的頁數
clearInterval() 取消setInterval()
setInterval() 設定的 。 clearTimeout() 取消由 setTimeout()
timeoutcreatePopup() 建立一個 pop-up
moveBy() 可相對視窗的目前座標把它移動指定的像素。 moveTo() 把視窗的左上角移動到一個指定的座標。
open() 開啟一個新的瀏覽器視窗或尋找一個已命名的視窗。
print() 列印目前視窗的內容。
resizeBy() 依照指定的像素調整視窗的大小。
resizeTo() 把視窗的大小調整到指定的寬度和高度。
scrollBy() 依照指定的像素值來捲動內容。
scrollTo() 把內容捲到指定的座標。
setInterval() 依照指定的周期（以毫秒計）來呼叫函數或計算表達式。
setTimeout(方法
,
秒數 在指定的毫秒數後呼叫函數或計算表達式。 timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定時器傳輸參數
window.eventoodow. document
window.historywindow.screen window.navigator Window.external （
或
iframe
標籤），瀏覽器會為
HTML
文件建立一個window
window ② window.frames
③parent 是父窗口（如果窗口是頂級窗口，那麼 parent==self==top ）
top是最高級的幾層窗口（是最高級視窗 frameset 或 iframe ）
self是當前窗（等價 是用
④與訊息框有關的方法： alert(String)
setTimeout(code,latency)
註：setTimeout
自身再次呼叫
會不停地呼叫
code物件 window.history.length //在瀏覽歷史前進一步 history.go(i) //
到汗青詳細登記單的第i 㟎
------------------------------------ -------------- -------------------
物件screen 物件：用於獲取某些關於用戶屏幕的信息，也可用
window.screen.width // 屏幕寬度. window.screen.colorDepth //
window.screen.availWidth
window.screen .availHeight //
(除去任務欄的高度 )
------------------------- ------------------------- -------------------
3.4 external 物件
window.external.AddFavorite("位址 ","
標題🜎
------------------------------------------------ -- -------------------
3.5 navigator物件 navigator`物件：包含大量有關 Web 瀏覽器的資訊物件：包含大量有關
Web瀏覽器，在偵測瀏覽器及作業系統上非常有用
window.navigator.appCodeName //瀏覽器代碼名稱
window. window .navigator.appMinorVersion //瀏覽器補釘版本
window.navigator.cpuClass //cpu類型 .模式種
window.navigator.plugins window.navigator.opsProfile㟎dow 〜〜『〜『起來navigator.systemLanguage //
客戶體系語言
簡體中文
window.navigator.userLanguage //
,. 包含體係版本 )
window.navigator.userAgent// 用戶代理頭的字串表示 window.navigator.onLineo 。 ookieEnabled //
瀏覽器是否撐持 window.navigator.mimeTypes
1）物件屬性
document.body//提供對
document.cookie 傳回與目前文件有關的所有 cookie。
document.title //回傳文件標題等價於
HTML
的
title標籤 document.doscript 傳回目前的網域文件。
document.bgColor // 回頁背景色
document.fgColor // 回傳前景色＜) (
文字顏色. 啟動連結
(焦點在此連結上 ) 的顏色 設定
URL
屬性從而在同一視窗開啟另一網頁
檔案建立日期，只讀屬性義 號、修改檔案.
document.lastModified 傳回文件被最後修改的日期和時間 。
document.fileSize //檔案大小，唯讀屬性
document.cookie //設定與讀取 cookie
document.charsetsetset/T document.URL 傳回目前文件的 URL
document.referrer 傳回載入目前文件的文件的 URL
document.styleSheets 返回樣式表的集合
回傳值.名去掉連字 ,
2）常用物件方法 動態向頁面寫入內容
document.writeln() 方法。 ，不同的是在每個表達式之後寫一個換行符。 document.createElement() //用指定標籤類型建立一個新的
物件
值的物件取得指定 Name 值的物件
getElementsByTagName() 傳回帶有指定標籤名稱的物件集合。
3）body-主體子對象主體子對象
document.body //指定文檔主體的開始和結束等價於
body>/body>
document.body.bgColor //設定或取得物件後面的背景顏色 未點擊過的連結顏色document.body.alink // 啟動連結
(
)doc .已點選的連結顏色
document.body.text // 文字色document.body.innerText // 設定
設定
…body
設定body> … /body> 之間的 HTML .p
document.body.leftMargin //頁面左邊距document.body.rightMargin // 頁面右邊距document.body.bottomMargin // 頁下邊頁下邊 . 背景圖片
document.body.appendChild(oTag) //動態產生一個
HTML物件
4)。 )
”//
老鼠指標點擊物件是觸發document.body.onmouseover=” func() ” // 老鼠指標移到物件時觸發
.S.body // 老鼠指標移出物件時觸發 5）location- 位置子物件
location物件：表示載入視窗的
，也可用window.location 引用它
http://www.somewhere.com/pictures/index.htm中所使用的協議，即雙斜線之前的部分，如 cationhttp
伺服器的名字，如www.wrox.com
通常等於host ，有時會省略前面的UR聲明的請求的端口，預設情況下，大多數
URL沒有端口信息，如 8080 中主機名後的部分，如
location.pathname //URL中主機名後的部分，如location.search // 執行
請求的
如果URL 包含 # ，傳回該符號之後的內容，如 #anchor1
location.hreflocation.replace("http:www.baidu.com"); // 同
和
location.reload(true | false); //location.reload(true | false); // location.reload(true | false); // 為當前頁，為重新載入
false時從瀏覽器快取中重載，為 true 時從伺服器端重載，預設為 false
6）selection-選區子物件
document.selection 7）forms
) )
透過集合引用 document.forms // 對應頁面上的 對應頁上/form /form
document.forms[0] //第 1 個 /formform 標籤
document.forms[i] //標籤 標籤 第
i-1個 /formform 中的控制數 個
第i-1 個 /formform 中第 j-1 個控制項 formform name = 」
Myform
myctrl 控制項名稱 存取表單的屬性 對應 form name>
屬性.
document.forms[i].encoding //對應
屬性 /formform target> 屬性
動態插入一個控制項圖。 all.oDiv.style.display= ”
圖層設定為可視document.all.oDiv.style.display= 層設定為隱藏
document.getElementId(”
” ).style=
”document.getElementId( ”
oDiv表示
document中所有物件的集合 ie 支援此屬性，因此也用來判斷瀏覽器的種類 */
........ 節點
在HTML DOM （文檔物件模型）中，每個部分都是節點：
1.文檔本身是文檔節點
2.元素是所有資料 3.所有
HTML屬性是屬性節點 元素內的文字是文字節點
5.在HTML DOM
中，Element
物件表示HTML
Element 物件可以擁有類型為元素節點、文字節點、註解節點的子節點。 物件表示節點列表，例如 HTML 元素的子節點集合。
取得
取得指定ID 值的物件
NameName
getElementsByTagName() 傳回帶有指定標籤名的物件集合。 方法裡有 a,b
的參數只是為了加深說明)為元素新增指定的類別
element.accessKey 設定或傳回元素的快速鍵。
element.appendChild() 將新的子節點，作為最後一個子節點。
element.childNodes 傳回元素子節點的 NodeList 。 class 屬性。
element.clientWidth 傳回元素的可見寬度。
element.compareDocumentPosition() 比較兩個元素的文檔位置。
element.contentEditable 設定或傳回元素的文字方向。
element.dir 設定或傳回元素的文字方向。
element.firstChild 傳回元素的首個子。
element.getElementsByTagName() 傳回擁有指定標籤名的所有子元素的集合。 API
的某個物件。
element.getUserData() 傳回關聯元素上鍵的物件。
Element.hidden
取得或設定
hidden
屬性的存在狀態
element.hasAttribute() 如果元素擁有指定屬性，則傳回
element.hasAttributes() 如果元素擁有屬性，則傳回 true
，否則傳回
element.hasChildNodes() 如果元素擁有子節點，則傳回 true
element.id 設定或傳回元素的 idelement.innerHTML 設定或傳回元素的內容。
element.insertBefore(,) 在指定的已有的子節點之前插入新節點。 A 插到 b 前
element.isContentEditable 設定或傳回元素的內容。
element.isDefaultNamespace() 如果指定的 namespaceURI 是默認的，則返回 true ，否則返回 false 。
element.isEqualNode() 檢查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() 從元素移除指定的類別
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()如果類別不存在就添加它存在就移除它
element.tabIndex 設定或傳回元素的 tab 鍵控制次序。
element.tagName 傳回元素的標籤名稱。
element.textContent 設定或傳回節點及其後代的文字內容。
element.title 設定或傳回元素的 title 屬性。
element.toString() 把元素轉換為字串。
nodelist.item() 傳回 NodeList 中位於指定下標的節點。
nodelist.length 傳回 NodeList 中的節點數。
element.addEventListener(event, function, useCapture)
注意:
不要使用
"on"
前綴。 例如，使用"click" , 而不是使用 "onclick" 。 提示： 所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 物件參考手冊。
function
必須。指定要事件觸發時執行的函數。
當事件物件 會作為第一個參數傳入函數。 事件物件的類型取決於特定的事件。例如， "click" 事件屬於 MouseEvent( 滑鼠事件 ) 物件。
useCapture
可選。布林值，指定事件是否在捕獲或冒泡階段執行。
可能值:
true - 事件句柄在捕獲階段執行
false- false- 預設。事件句柄在冒泡階段執行
contentWindow 屬性
如果文件裡有iframe
rows
TableRow
和
中定義的所有行 TableRow 物件TableRow 對象
在 HTML 文檔中
標籤每出現一次，一個 TableRow 對象就會被創建。 TableRow 物件集合
IE
F
4
1
91
cells 集合回傳表格中所有
或
元素。 TableCell 物件代表一個 HTML 表格單元格 。
在一個HTML 文件中
標籤每出現一次，一個 TableCell . 名稱
如mouseover
字串
target
事件指向的元素
HTMLElement
HTMLElement
HTMLElement
HTMLElement
2）Window 事件屬性 (沒加藍的都是 h 5 新事件 ) h 5
對針對) 標籤）：
onafterprint 文件列印之後執行的腳本。
onbeforeprint 文件列印之前執行的腳本。
onbeforeunload 文件卸載先前執行的腳本。
onerror 在錯誤發生時運行的腳本。
onhaschange 當文件已變更時執行的腳本。
onload 頁面結束載入之後觸發。
onmessage 在訊息被觸發時運行的腳本。
postMessage ()向主執行緒發送訊息,在某些場景下，業務呼叫方可能需要主動跟定位元件通訊 , 可以透過 html55
postMessage 的方式主動與定位組件啟動通訊
ononline 當文件上線時執行的腳本。
onpagehide 當視窗隱藏時執行的腳本。
onpageshow 當視窗成為可見時執行的腳本。
onpopstate 當視窗歷史記錄改變時執行的腳本。
onredo 當文件執行撤銷（
redo）時執行的腳本。
onstorage 在
Web Storage 區域更新後執行的腳本。
undo 時運行的腳本。
onunload 一旦頁面已下載時觸發（或瀏覽器視窗已關閉）。
3）Form 事件 HTML 表單內的動作觸發的事件（應用到幾乎所有 HTML 表單內的動作觸發的事件（應用到幾乎所有 屬性
元素失去焦點時執行的腳本。
onchange在元素值被改變時運行的腳本。
oncontextmenu 當上下文選單被觸發時運行的腳本。
當元素失去焦點時執行的腳本。
onformchange 在表單改變時執行的腳本。 onforminput 當表單獲得使用者輸入時執行的腳本。
oninput 當元素獲得使用者輸入時執行的腳本。
oninvalid 當元素無效時執行的腳本。
onreset
當表單中的重置按鈕被點擊時觸發。 HTML5
中不支援。 在元素中文字被選取後觸發。
onsubmit 在提交表單時觸發。
4）oninput,onpropertychange,onchange
的用法oninput: oninput:
oninput 事件在使用者輸入時觸發。
該事件在 或 元素的值改變時觸發。
提示： 事件類似於 onchange 事件。不同之處在於 oninput 事件在元素值發生變化是立即觸發， onchange 在元素失去焦點時觸發。另外一點不同是 onchange 事件也可以作用於 和 元素。
onchange
onchange 事件會在網域的內容改變時發生。
onchange 事件也可用於單選框與複選框改變後觸發的事件。
onchange 觸發事件必須滿足兩個條件：
a）當前物件屬性改變，並且是由鍵盤或滑鼠事件激發的（腳本觸發無效）
）失去焦點 (onblur) ；
onpropertychange 的話，只要當前物件屬性改變，都會觸發事件，但是它是IE 的非
IE瀏覽器版本，支援 firefox 和 opera 等瀏覽器，但當有一點不同，它綁定於物件時，並非該物件都能改變物件它只在物件 value 值改變時奏效。
5）行動端觸控事件 ontouchstart
、
ontouchmove
、 1 、Touch 事件簡介 pc 上的
onmousedown、 onmouseup 、 mousemove
iphone ontouchcancel當按下手指時，觸發 ontouchstart當移動手指時，觸發 ontouchmoveontouchmove ；
當移走手指時，觸發ontouchend 。
當一些更高級別的事件發生的時候（如電話接入或彈出訊息）會取消當前的touch 操作，即觸發 ontouchcancel 。一般會在 ontouchcancel 時暫停遊戲、存檔等操作。
2、 Touch 事件與 Mouse 事件的出發關係 ？後），系統會判斷接收到事件的
element的內容是否被改變，如果內容被改變，接下來的事件都不會觸發，如果沒有改變，會按照 mousedown ， mouseup mousedownmouse click
基本操作心智圖
