第12章 事件
1.事件流
1.1事件冒泡（IE事件流）
□事件冒泡（event bubbling），即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接受，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。
□所有瀏覽器均支持事件冒泡。Firefox、chrome、safari將事件一直冒泡到window對象。
1.2事件捕獲（Netscape事件流）
□不太具體的節(jié)點更早收到事件，而具體的節(jié)點最后收到節(jié)點。
□Safari、chrome、Opera、firefox支持，但從window對象開始捕獲（DOM2級規(guī)范是從document開始）。
1.3DOM事件流
□“DOM2級事件”規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。
□DOM2：捕獲階段不含實際目標(biāo)，不涉及事件目標(biāo)，只為截獲事件提供機會。
□Safari、chrome、Firefox和Opera9.5以上都會在捕獲階段觸發(fā)事件對象上的事件。結(jié)果有兩個機會在目標(biāo)上操作事件。
□IE不支持DOM事件流。其他支持。
2.事件處理程序（或事件偵聽器）
定義：響應(yīng)某個事件的函數(shù)。
2.1 HTML事件處理程序
□某個元素支持的每種事件，都可以使用一個相應(yīng)事件處理程序同名的HTML特性來指定。
□其中的函數(shù)代碼字符需經(jīng)過HTML轉(zhuǎn)義。
□存在問題：
◇時差問題：當(dāng)觸發(fā)事件時，事件處理程序有可能尚不具執(zhí)行條件。使用try-catch塊封裝，以便錯誤不會浮出水面。
<input type="button" value="click me" onclick="try{show();}catch(ex){}"/>
◇HTML與JavaScript代碼緊密耦合。
2.2 DOM0級事件處理程序
□DOM0級事件處理程序：將一個函數(shù)賦值給一個事件處理程序?qū)傩?。?yōu)點：簡單、跨瀏覽器。
□這種方式的事件處理程序在代碼運行以前不會綁定事件。
□使用DOM0級方法指定的事件處理程序被認為是元素的方法。事件處理程序在元素作用域中運行；程序中this引用當(dāng)前元素。
□刪除DOM0級事：btn.onclick = null; //刪除事件處理程序
2.3 DOM2級事件處理程序
□addEventListener()和removeEventListener()。接受3個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。
◇如果最后這個布爾值是true，表示捕獲階段調(diào)用事件處理程序；如果是false表示冒泡階段調(diào)用事件處理程序。
Var btn = document.getElementById("myBtn");
Btn.addEventListener("click",function(){alert(this.id);},false);
□使用DOM2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。按添加順序觸發(fā)。
□通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除；移除時傳入的參數(shù)與添加處理程序時使用的參數(shù)相同。即匿名函數(shù)無法移除。
□將事件處理程序添加到冒泡階段，得到最大限度兼容。
□Firefox、Safari、Chrome和Opera支持DOM2級事件處理程序。IE不支持，有獨有的事件處理程序。
2.4 IE事件處理程序。
□IE中與DOM2類似方法：attachEvent()和detachEvent()。這兩個方法接受相同的兩個參數(shù)：事件處理程序名稱與事件處理程序函數(shù)。
□IE僅支持冒泡，通過attachEvent()添加的事件處理程序都被添加到冒泡階段。
□attachEvent()中事件處理函數(shù)會再全局作用域中運行，因此this等于window。
□attachEvent()也可以為元素添加多個處理程序，以相反的書序觸發(fā)。
□attachEvent()事件可通過detachEvent()移除，匿名函數(shù)無法移除。
2.5 跨瀏覽器的事件處理程序
var EventUtil = {
addHandler : function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on" + type, handler);
}else{
elmenet["on" + type] = handler;
}
],
removeHandler : function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent("on"+type, handler);
}else{
element["on"+type] = null;
}
}
};
□此兼容函數(shù)沒有考慮到瀏覽器的所有問題，如IE中作用域問題。
3.事件對象
定義：在觸發(fā)DOM的某個事件時，會產(chǎn)生一個事件對象event，這個對象中包含著所有與事件有關(guān)的信息。
3.1DOM中的事件對象
①兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中（DOM0級或DOM2級）。通過HTML特性指定時，event變量保存event對象。
②所有event對象均包含以下屬性/方法。P291
□bubbles：表明事件是否冒泡，bool。
□cancelable：表明是否可以取消事件的默認行為，bool。
□currentTarget：其事件處理程序當(dāng)前正在處理事件的那個元素。
□detail：與事件相關(guān)的細節(jié)信息。
□eventPhase：調(diào)用事件處理程序的階段：1.捕獲 2.處于目標(biāo) 3.冒泡。
□preventDefault()：取消事件默認行為。
□stopPropagation()：取消事件的進一步捕獲或冒泡。
□target：事件的目標(biāo)。
□type：被觸發(fā)的事件類型。
□view：與事件關(guān)聯(lián)的抽象視圖。
③在事件處理程序內(nèi)部：
□對象this始終等于currentTarget的值，即this和currentTarget均指向綁定該事件程序的元素。
□target則只包含事件的實際目標(biāo)，即觸發(fā)事件的元素。
④event.preventDefault()：可取消特定事件的默認行為。
⑤event.stopPropagation()：立即停止事件在DOM中的傳播。
⑥通過eventPhase屬性確定事件當(dāng)前正位于事件流哪個階段。
3.2 IE中的事件對象
①訪問IE中的event對象，取決于指定的事件處理程序方法。
□使用DOM0級方法添加事件處理程序時，event對象作為window對象的一個屬性存在。
□使用attachEvent()添加，則有一個event對象作為參數(shù)傳入。同時也可以通過window.event訪問。
□通過HTML特性指定事件處理程序時，可以通過一個名叫event的變量訪問event對象。
②IE中所有的event對象包含以下屬性/方法：
□cancelBubble：默認為false，設(shè)為true可取消事件冒泡（類似DOM中的stopPropagation()方法）
□returnValue：默認為true，設(shè)為false可取消事件默認行為。（類似DOM2中的preventDefault()方法）
□srcElement：事件的目標(biāo)（與DOM2中target屬性相同）
□type：被觸發(fā)的事件類型。
3.3 跨瀏覽器的事件對象
var eventUtil = {
getEvent : function(event){
Return event ? Event : window.event;
},
getTarget : function(event){
return event.target || event.srcElement;
},
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};
4.事件類型
□鼠標(biāo)事件，當(dāng)用戶通過鼠標(biāo)在頁面上執(zhí)行操作時觸發(fā)；
□鍵盤事件，當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)；
□HTML事件，當(dāng)瀏覽器窗口發(fā)生變化或發(fā)生特定的客戶端/服務(wù)器交互時觸發(fā)。
□變動（mutation）事件，當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)。
4.1 UI事件
UI事件主要與元素焦點相關(guān)，僅在兼容DOM的瀏覽器中受到支持：
□DOMActive：表示元素已經(jīng)被用戶操作（通過鼠標(biāo)或鍵盤）激活；
□DOMFocusIN：表示元素已經(jīng)獲得焦點；為HTML中focus事件的普通版；
□DOMFocusOut：表示元素已經(jīng)失去焦點；為HTML中blur事件的普通版；
△由于支持的瀏覽器很少，不推薦使用。
4.2 鼠標(biāo)事件
①DOM中定義了7個鼠標(biāo)事件，頁面上所有元素都支持鼠標(biāo)事件：
□click：在用戶單擊主鼠標(biāo)按鈕（一般式左邊的按鈕）或者按下回車鍵時觸發(fā)。
□dblclick：在用戶雙擊主鼠標(biāo)按鈕（一般是左鍵）時觸發(fā)。
□mousedown：在用戶按下了任意鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。
□mouseout：在鼠標(biāo)指針位于一個元素上方，然后用戶將其移入另一個元素時觸發(fā)。新移入的元素可能在舊元素外部，也可以是其子元素。不能通過鍵盤觸發(fā)。
□mouseover：在鼠標(biāo)指標(biāo)為于一個元素外部，然后用戶將其首次移入另一個元素邊界之內(nèi)時觸發(fā)。不通過鍵盤觸發(fā)。
□mouseup：在用戶釋放鼠標(biāo)按鈕時觸發(fā)。不通過鍵盤觸發(fā)。
□mousemove：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動時重復(fù)地觸發(fā)。不能通過鍵盤觸發(fā)。
②注意事項：
□同一個元素上相繼觸發(fā)mousedown和mouseup事件才會觸發(fā)click事件。如果mousedown或mouseup其中之一取消，就不會觸發(fā)click事件。
□同一元素連續(xù)兩次觸發(fā)click事件，才會觸發(fā)dblclick事件。
4.2.1 客戶區(qū)坐標(biāo)位置
□鼠標(biāo)事件都是在瀏覽器視口中的特定位置發(fā)生的。這個位置信息保存在事件對象（event）中的clientX和clientY屬性中。
4.2.2 屏幕坐標(biāo)位置
□鼠標(biāo)事件發(fā)生時，還有一個相對于整個電腦屏幕的位置。保存在事件對象（event）中的screenX和screenY屬性中。
4.2.3 修改鍵
□雖然鼠標(biāo)事件主要是使用鼠標(biāo)來觸發(fā)，但按下鼠標(biāo)時鍵盤上的某些鍵也可以影響到所需操作。
□修改鍵為：Shift、Ctrl、Alt和Meta（蘋果中cmd鍵、windows中windows鍵）。
□DOM中表示這4個鍵的布爾值屬性：（在鼠標(biāo)事件的event中）shiftKey、ctrlKey、altKey和metaKey（IE不支持metaKey）。
4.2.4 相關(guān)元素
發(fā)生mouseover和mouseout事件時，會涉及更多元素。兩事件都會涉及把鼠標(biāo)指針從一個元素的邊界之內(nèi)移動到另一個元素的邊界之內(nèi)。
□DOM通過evnet對象的relatedTarget屬性提供了相關(guān)元素信息。
□IE不支持relatedTarget屬性。
◇在mouserover事件觸發(fā)時，IE的fromElement屬性中保存了相關(guān)元素。
◇在mouseout事件觸發(fā)時，IE的toElement屬性保存了相關(guān)元素。
□兼容方式：
var eventUtil = {
getRelatedTarget : function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
}
};
4.2.5 鼠標(biāo)按鈕
□click事件：單擊鼠標(biāo)主鍵觸發(fā)，無必要檢測按鍵信息。
□mousedown和mouseup事件，在其event對象中有一button屬性表示按下或釋放的按鈕。
□DOM中的button屬性取值：
◇0表示主鼠標(biāo)按鍵
◇1鼠標(biāo)中鍵（滾輪按鈕）
◇2鼠標(biāo)次鍵
□IE提供的button屬性
◇0沒按鍵◇1按主鍵◇2按次鍵◇3同時主+次◇4中鍵◇5主+中◇6次+中◇7主+次+中
□兼容代碼
getButton : function(event){
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){
case 0 :
case 1 :
case 3 :
case 5 :
case 7 :
return 0;
case 2 :
case 6 :
return 2;
case 4 :
return 1;
}
}
}
};
□如果不是按下或釋放主鍵，opera不會觸發(fā)mouseup或mousedown
4.2.6 更多的事件信息
□DOM2中detail屬性：元素單擊次數(shù)，離離開元素后清0.
□IE為鼠標(biāo)增加更多信息。（僅IE支持，并無實用價值）。
4.2.7移動Safari
面向iPhone和Ipod中Safari開發(fā)時：
□不支持dblclick事件。雙擊Safari窗口會放大畫面，無法改變該行為。
□輕擊可單擊元素先觸發(fā)mousemove事件，若導(dǎo)致內(nèi)容變化則無其他事件發(fā)生。若無內(nèi)容變化，一次發(fā)生mousedown、mouseup和click。
□mousemove事件也會觸發(fā)mouseover和mouseout事件。
4.2.7 易訪問性問題
屏幕閱讀器只可通過click來觸發(fā)事件。使用鼠標(biāo)事件時應(yīng)該注意：
□使用click事件執(zhí)行代碼
□不要使用onmouseover向用戶顯示新選項。屏幕閱讀器無法觸發(fā)。
□不要使用dblclick執(zhí)行重要操作。鍵盤無法觸發(fā)。
4.3 鍵盤事件
①對鍵盤事件的支持主要遵循DOM0級?！癉OM3級”為鍵盤事件制定了規(guī)范。
②3個鍵盤事件：
□keydown：當(dāng)用戶按下鍵盤上的任意鍵時觸發(fā)，而且如果按住不放的話，會重復(fù)觸發(fā)此事件。
□keypress：當(dāng)用戶按下鍵盤上的字符鍵時觸發(fā)，而且如果按住不放的話，會重復(fù)觸發(fā)此事件。
□keyup：當(dāng)用戶釋放鍵盤上的鍵時觸發(fā)。
□與鼠標(biāo)事件一樣，支持相同的修改鍵。而且鍵盤事件對象中也有shifKey、ctrlKey、altKey、metaKey屬性。
4.3.1 鍵碼
①發(fā)生keydown和keyup事件時，event對象的keyCode屬性會包含一個代碼與鍵盤上一個特定的鍵對應(yīng)。
②keyCode屬性值與ASCII碼中對應(yīng)小寫字母或數(shù)字的編碼相同。查表P304
③DOM和IE的event對象都支持keyCode屬性。
④以下是無論keydown或keyup事件都會存在的一些特殊情況：
□Firefox和Opera中，按分號鍵時keyCode值為59，即ASCII中值，但IE和Safari返回186，即鍵盤鍵碼
□Safari3之前版本中，上下左右，上下翻頁返回大于6300的值。
□在Opera9.5之前版本中，會將非數(shù)字字母鍵的keyCode設(shè)為ASCII編碼。
□在Safari3之前版本，不會因為按下了制表、上檔、控制或替代鍵而觸發(fā)keydown和keyup事件。
4.3.2 字符編碼
□Firefox、Chrome和Safari的event對象支持一個charCode屬性，這個屬性只有在發(fā)生keypress時才有值，為字符的ASCII編碼。此時的keyCode值有可能為0，也可能為所按鍵碼。
□IE和Opera則是在keyCode中保存ASCII編碼。
□跨瀏覽器取字符編碼
var EventUtil = {
//省略的代碼
getCharCode : function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
},
};
4.3.4 textInput事件
□當(dāng)用戶在可編輯區(qū)域中輸入字符時，會觸發(fā)textInput事件。
◇只有編輯區(qū)域才能觸發(fā)textInput事件。
◇事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發(fā)。
◇事件event對象中包含一個data屬性，保存用戶輸入的字符。
□2008年上半年，僅Safari3和Chrome支持。
4.3.4 設(shè)備中的鍵盤事件。（略）
4.4 HTML事件
①定義：HTML事件指的是那些不一定與用戶操作有關(guān)的事件。
□load事件：
◇當(dāng)頁面完全加載后window上面觸發(fā)。
◇當(dāng)所有框架都加載完畢時在框架集上面觸發(fā)
◇當(dāng)圖像加載完畢時在<img>元素上面觸發(fā)
◇當(dāng)嵌入的內(nèi)容加載完畢時在<object>元素上面觸發(fā)
□unload事件：
◇當(dāng)頁面完全卸載后在window上面觸發(fā)
◇當(dāng)所有框架都卸載后在框架集上面觸發(fā)
◇嵌入的內(nèi)容卸載完畢后在<object>元素上面觸發(fā)
□abort事件：在用戶停止下載過程時，如果嵌入的內(nèi)容沒有加載完，則在<object>元素上面觸發(fā)。
□error事件：
◇當(dāng)發(fā)生JavaScript錯誤時在window上面觸發(fā)
◇當(dāng)無法加載圖像時在<img>元素上面觸發(fā)
◇當(dāng)無法加載嵌入內(nèi)容時在<object>元素上面觸發(fā)
◇當(dāng)有一或多個框架無法加載時在框架集上觸發(fā)
□select事件：當(dāng)用戶選擇文本框（<input>或<textarea>）中的一個或多個字符時觸發(fā)。
□change事件：當(dāng)文本框（<input>或<textarea>）失去焦點或者取得焦點后其值被改變時觸發(fā)。
□submit事件：當(dāng)用戶單擊提交按鈕時在<form>元素上面觸發(fā)。
□reset事件：當(dāng)用戶單擊重置按鈕時在<form>元素上觸發(fā)。
□resize事件：當(dāng)窗口或框架的大小變化時在window或框架上觸發(fā)。
□scroll事件：當(dāng)用戶滾動帶滾動條的元素中的內(nèi)容時，在該元素上面觸發(fā)。<body>元素中包含所加載頁面的滾動條。
□focus事件：當(dāng)頁面或元素獲得焦點（用戶單擊、按制表鍵進入或以其他方式激活元素時）在window及相應(yīng)元素上面觸發(fā)。
□blur事件：當(dāng)頁面或元素失去焦點時在window及相應(yīng)元素上面觸發(fā)。
②多數(shù)HTML事件都與window對象或表單控件相關(guān)。要確定瀏覽器是否支持DOM規(guī)定的HTML事件代碼如下：
Var isSupport = document.implementation.hasFeature("HTMLEvents","2.0");
4.4.1 加載（load）事件
①有兩種定義onload事件處理程序的方式
□EventUtil.addHandler(window,"load",function(event){alert("loaded");});
□為<body>元素添加一個onload特性（不建議）
②圖像上面也可以觸發(fā)load事件，無論是DOM中圖像還是HTML中的圖像元素。
□可以像使用<img>元素一樣使用image對象，不過無法添加到DOM樹中。
例子：使用Image對象在客戶端預(yù)加載圖像
EventUtil.addHandler(window,"load",function(){
var image = new Image();
EventUtil.addHandler(image,"load",function(event){
alert("Image loaded!");
});
image.src = "smile.gif";
});
③Firefox、Opera、Chrome和Safari3以上，<script>元素也會觸發(fā)load事件。與圖像不同，只有在設(shè)置了src并添加到文檔中才會開始下載JS文件。（IE不支持）
④IE和Opera還支持<link>元素上load事件。與<script>節(jié)點類似，在未指定href屬性并將<link>元素添加到文檔之前也不會開始下載樣式表。
4.4.2 卸載事件（unload）
□與load事件對應(yīng)的是unload事件，這個事件在文檔完成卸載后觸發(fā)。
□利用這個事件最多的情況是消除引用，以免內(nèi)存泄露。
□使用方式一：EventUtil.addHandler(window,"unload",function(event){alert("unload");});
□使用方式二：為<body>元素添加一個特性。
4.4.3 調(diào)整大?。╮esize）事件
①當(dāng)瀏覽器窗口被調(diào)整到一個新的高度或?qū)挾葧r，就會觸發(fā)resize事件。
②事件在window（窗口）上觸發(fā)，因此可以通過JavaScript或<body>元素中的onresize特性來指定事件處理程序。
③IE、Safari、Chrome和Opera會再瀏覽器窗口變化了1像素時觸發(fā)resize事件，然后隨著變化不斷重復(fù)觸發(fā)。因此不要加入大量計算代碼。
4.4.4 滾動（scroll）事件（略）
4.5 變動事件
①定義：DOM2級的變動（mutation）事件能在DOM中的某一部分發(fā)生變化是給出提示。
②DOM2級定義了如下變動事件：
□DOMSubtreeModified：在DOM結(jié)構(gòu)中發(fā)生任何變化時觸發(fā)。
□DOMNodeInserted：在一個節(jié)點作為子節(jié)點被插入到另一個節(jié)點中時觸發(fā)。
□DOMNodeRemoved：在節(jié)點從其父節(jié)點中移除時觸發(fā)。
□DOMNodeInsertIntoDocument：在一個節(jié)點被直接插入文檔或通過子樹間接插入文檔之后觸發(fā)。在DOMNodeInsert之后觸發(fā)。
□DOMNodeRemovedFromDocument：在一個節(jié)點被直接從文檔中移除或通過子樹間接從文檔中移除之前觸發(fā)。這個事件在DOMNodeRemove之后觸發(fā)。
□DOMAttriModified：在特性被修改之后觸發(fā)。
□DOMCharacterDataModified：在文本節(jié)點的值發(fā)生變化時觸發(fā)。
③檢測瀏覽器是否支持變動事件：
Var isSupport = document.implementation.hasFeature("MutationEvents","2.0");
□實際上，即使返回true也不代表瀏覽器支持。P312
4.6 專有事件
4.6.1 上下文菜單（contextmenu事件）
①contextmenu事件：用以表示何時應(yīng)該顯示上下文菜單，以便開發(fā)人員取消默認的上下文菜單而提供自定義的菜單。
②contextmenu事件是冒泡的，因此可以為document指定一個事件處理程序，用以處理頁面中發(fā)生的所有類似事件。
③事件的目標(biāo)是發(fā)生用戶操作的元素，在所有瀏覽器中都可以取消這個事件：兼容的DOM的：event.preventDefault()，在IE中，event.returnValue設(shè)為false。
④contextmenu事件屬于鼠標(biāo)事件，其對象中包含與光標(biāo)位置有關(guān)的所有屬性。
⑤通常使用contextmenu事件來顯示自定義的上下文菜單，而使用onclick事件處理程序隱藏該菜單。
EventUtil.addHandler(window, "load", function(event){
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "contextmenu", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById("myMenu");
menu.Style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
menu.style.visibility = "visible";
});
EventUtil.addHandler(document, "click", fucntion(event){
document.getElementById("myMenu").style.visibility = "hidden";
});
});
4.6.2 卸載前（beforeunload）事件
①beforeunload事件：會在瀏覽器卸載頁面之前觸發(fā)，可以通過它來取消卸載并繼續(xù)使用原有頁面。
②IE和Firefox支持，會彈出詢問用戶是否離開對話框。Safari和Chrome支持，但不妨礙事件繼續(xù)，沒有顯示對話框。Opera9.5之前不支持。
EventUtil.addHandler(window, "beforeunload", function(event){
event = EventUtil.getEvent(event);
event.returnValue = "I'm really miss you";
});
4.6.3 鼠標(biāo)滾輪（mousewheel）和DOMMouseScroll事件
①在鼠標(biāo)滾輪滾動時觸發(fā)
②mousewheel事件為IE、Opera、Chrome、Safari支持，事件對應(yīng)event中包含鼠標(biāo)事件的所有標(biāo)準信息外，還包含一個特殊的wheelEdlta屬性。是120的倍數(shù)，向后滾-120倍數(shù)。
③9.5之前的版本中，wheelDelta值正負號顛倒。
④Firefox支持DOMMouseScroll事件，滾輪信息存在detail屬性中，前滾為-3倍數(shù)，后滾為3倍數(shù)。
兼容代碼：
var EventUtil = {
getWheelDlta : function(event){
if(event.wheelDelta){
Return (client.egine.opera && client.egine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
}else{
return -event.detail * 40;
}
},
};
4.6.4 DOMContentLoaded事件
①DOMContentLoaded事件在形成完整的DOM樹之后就觸發(fā)，不會理圖像、JavaScript文件、CSS文件或其他資源是否已經(jīng)下載完畢。
EventUtil.addHandler(document,"DOMContentLoaded", function(event){
alert("Content loaded");
});
②對于不支持DOMContentLoad的瀏覽器，建議在頁面加載期間設(shè)置一時間為0毫秒的超時調(diào)用。
setTimeout(function(){
//在此添加事件處理程序
}, 0);
4.6.5 就緒狀態(tài)變化（readystatechange)事件
①IE為DOM文檔中某些部分提供了readystatechange事件：提供與文檔或元素的加載狀態(tài)有關(guān)的信息。
②支持readystatechange事件的每個對象都有一個readyState屬性
□uninitialized（未初始化）：對象存在但尚未初始化；
□loading（正在加載）：對象正在加載數(shù)據(jù)；
□loaded（加載完畢）：對象加載數(shù)據(jù)完成；
□interactive（交互）：可以操作對象了，但還沒完全加載
□complete（完成）：對象已經(jīng)加載完畢。
③在IE中使用readystatechange近似模擬DOMContentLoaded事件。
EventUtil.addHandler(document, "readystatechange", function(event){
if(document.readyState == "interactive" || document.readyState == "complete"){
eventUtil.removeHandler(document, "readystatechange", arguments.callee);
alert("Content load");
}
});
4.6.6 頁面顯示（pageshow）和頁面隱藏（pagehide）事件
①Firefox和Opera有一個特性，名叫“往返緩存”（back-forward cache，或bfcache）?？梢栽谟脩羰褂脼g覽器的“后退”和“前景”按鈕時加快頁面的轉(zhuǎn)換速度。
②pageshow事件：在頁面顯示時觸發(fā)，無論頁面是否來自bfcache。在重新加載的頁面中，pageshow會在load事件觸發(fā)后觸發(fā)，而對于bfcache中的頁面，pageshow會在頁面狀態(tài)完全恢復(fù)的那一刻觸發(fā)。
□pageshow事件的event對象包含一個名為persisted的布爾值屬性。如果頁面保存在bfcache中，則只為true，反之則反。
③pagehide事件：事件會在瀏覽器卸載頁面的時候觸發(fā)，而且是在unload事件之前觸發(fā)。
□第一次觸發(fā)pagehide時，persisted就會變成true（除非頁面不存在bfcache中）
④指定了onunload事件處理程序的頁面自動排除在bfcache之外。
4.6.7 移動Safari支持的事件
①方向變化（ovientationchange）事件
②觸摸事件
③手勢事件
5.內(nèi)存和性能
①在JavaScript中，添加到頁面上的事件處理程序數(shù)量直接關(guān)系到頁面整體運行性能。
□每個函數(shù)是對象，都會占用內(nèi)存；內(nèi)存中的對象越多，性能越差。
□必須事先指定所有事件處理程序而導(dǎo)致的DOM訪問次數(shù)，會延遲整個頁面的交互就緒時間。
5.1 事件委托
①事件委托：解決“事件處理程序過多”問題。
原理：利用事件冒泡，只指定一個事件處理程序，來管理某一類型的所有事件。
var list = document.getElementById("myLinks");
EventUtil.addHandler(list,"click",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething" : document.title = "I changed the title";
break;
case "goSomewhere" : location.;
break;
case "sayHi" : alert("hi");
break;
}
},false);
②如果可行的話，也可以考慮為document對象添加一個事件處理程序，用以處理頁面上發(fā)生的某種特定類型事件。
優(yōu)點：
□document對象很快就可以訪問，而且可以在頁面生命周期的任何時間點上為它添加事件處理程序（無需等待DOMContentLoad或Load事件）。即只要可單擊的元素呈現(xiàn)在頁面上，就可以立即具備適當(dāng)?shù)墓δ堋?
□在頁面中設(shè)置事件處理程序所需的時間更少。只添加一個事件處理程序所需的DOM引用更少，所花的時間也更少。
□整個頁面占用的內(nèi)存空間更少，能提升整體性能。
③使用范圍
□適合采用事件委托技術(shù)的事件包括click、mousedown、mouseup、keydown、keyup和keypress。
□雖然mouseover和mouseout事件也冒泡，但要適當(dāng)處理他們并不容易，而且經(jīng)常需要計算元素的位置（因當(dāng)鼠標(biāo)從一個元素移動到其子節(jié)點時或者鼠標(biāo)移出該元素時，就會觸發(fā)mouseout事件）
5.2 移除事件處理程序
①瀏覽器頁面代碼與JavaScript代碼之間建立的鏈接越多，執(zhí)行越慢?？捎檬录屑夹g(shù)，限制建立的鏈接數(shù)量。在不需要的時候移除事件處理程序。
②內(nèi)存中留有過時不用的“空事件處理程序”（dangling event handler）也是造成web應(yīng)用程序內(nèi)存與性能問題的主要原因。
1）第一種情況：從文檔中移除帶有事件處理程序的元素時。如removeChild()和replaceChild()方法，更多是發(fā)生在使用innerHTML替換頁面中某一部分的時候。
□手動解除這些“空事件處理程序”，釋放內(nèi)存。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//先執(zhí)行某些操作
btn.onclick = null; //移除事件處理程序
document.getElementById("myDiv").innerHTML = "prossing";
};
2）另一種情況：卸載頁面的時候。若沒有清理干凈會滯留內(nèi)存。
□在卸載之前，先通過onunload事件處理程序移除所有事件處理程序。
6.模擬事件
可以使用JavaScript在任意時刻來觸發(fā)特定的事件，而此時的事件就如同瀏覽器創(chuàng)建的事件一樣。即該冒泡會冒泡，且照樣導(dǎo)致瀏覽器執(zhí)行已經(jīng)制定處理它們的事件處理程序。
6.1 DOM中的事件模擬
■可以在docuemnt對象上使用createEvent()方法創(chuàng)建對象。這個方法接受一個參數(shù)，即表示創(chuàng)建事件類型的字符串，如下：
□UIEvents：一般化的UI事件。鼠標(biāo)事件和鍵盤事件都繼承自UI事件。
□MouseEvents：一般化的鼠標(biāo)事件。
□MutationEvents：一般化的DOM變動事件。
□HTMLEvents：一般化的HTML事件。
■各種類型創(chuàng)建的event對象，都有一個特殊的方法，為它傳入適當(dāng)?shù)臄?shù)據(jù)可以初始化該event對象。
■觸發(fā)事件：調(diào)用dispatchEvent()方法，傳入要觸發(fā)事件的event對象。
6.1.1 模擬鼠標(biāo)事件
①創(chuàng)建新的鼠標(biāo)事件對象并為其指定必要的信息，就可以模擬鼠標(biāo)事件。創(chuàng)建鼠標(biāo)事件的對象方法是createEvent()，傳入字符串"MouseEvents"。返回的對象有一個名為initMouseEvent()方法，用于指定與該鼠標(biāo)事件有關(guān)的信息。
initMouseEvent()方法15個參數(shù)：
□type（字符串）：表示要觸發(fā)的事件類型名，例如“click”。
□bubbles（布爾值）：表示事件是否應(yīng)該冒泡。
□cancelable（布爾值）：表示事件是否可以取消。
□view（AbstractView）：與事件關(guān)聯(lián)的視圖。幾乎總設(shè)為document.defaultView
□detail（整數(shù)）：與事件有關(guān)的詳細信息。通常設(shè)為0
□screenX（整數(shù)）：事件相對于屏幕的X坐標(biāo)。
□screenY
□clientX（整數(shù)）：事件相對于視口的X坐標(biāo)。
□clientY
□ctrlKey（布爾值）：表示是否按下了Ctrl鍵。默認為false
□altKeyu
□shiftKey
□metaKey
□button（整數(shù)）：表示按下了哪一個鼠標(biāo)鍵。默認0
□relatedTarget（對象）：表示與事件相關(guān)的對象。這參數(shù)只在模擬mouseover或mouseout時使用。
var btn = document.getElementById("myBtn");
//創(chuàng)建事件對象
var event = document.creeateEvent("MouseEvents");
//初始化事件對象
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//觸發(fā)事件
btn.dispatchEvent(event);
6.1.2 模擬鍵盤事件
①Firefox中調(diào)用createEvent()并傳入"keyEvents"就可以創(chuàng)建一個鍵盤事件。返回的事件對象會包含一個initKeyEvent()方法。
②在其他瀏覽器中，則需要創(chuàng)建一個通用的事件，然后再向事件對象添加鍵盤事件特有的信息。
var textbox = document.getElementById("myTextbox");
//創(chuàng)建事件對象
var event = document.createEvent("Events");
//初始化事件對象
event.initEvent(type,bubbles,cancelable);
event.view = document.defaultView;
event.altKey = false;
event.ctrlKey = false;
event.shiftKey = false;
event.metaKey = false;
event.keyCode = false;
event.charCode = false;
//觸發(fā)事件
textbox.dispatchEvent(event);
6.1.3 模擬其他事件（變動事件和HTML事件）
6.2 IE中的事件模擬
IE中思路與DOM相同，其中的區(qū)別：
□IE使用document.createEventObject()方法創(chuàng)建對象。此法不接受參數(shù)，僅返回一個通用event對象。必須手工為此對象添加屬性。
□觸發(fā)事件在目標(biāo)上調(diào)用fireEvent()方法。兩個參數(shù)：事件處理程序名和event對象。在調(diào)用fireEvent()方法時，會自動為event對象添加srcElement和type屬性。
第十三章 表單腳本
1.表單
①JavaScript中表單<form>對應(yīng)HTMLFormElement類型。HTMLFormElement繼承了HTMLElement，因而與其它HTML元素具有相同的默認屬性。也有其獨有屬性和方法:
□acceptCharset：服務(wù)器能夠處理的字符集；等價HTML中的accept-charset特性。
□action：接受請求的URL；等于HTML中的action特性。
□elements：表單中所有控件的集合（HTMLCollection）。
□enctype：請求的編碼類型；等價于HTML中的enctype特性。
□length：表單中控件的數(shù)量。
□method：要發(fā)送的HTTP請求類型，通常是“get”或“post”；等價于HTML的method特性。
□name：表單名稱；等價于HTML的name特性。
□reset()：將所有表單域重置為默認值。
□submit()：提交表單。
□target：用于發(fā)送請求和接收響應(yīng)的窗口名稱；等價于HTML的target特性。
②獲取表單
var form = document.getElementById("form1");
var firstForm = document.forms[0];
var myForm = document.forms["form2"];
1.1 提交表單
①提交表單的三種方法：
□通用按鈕：<input type="submit" value="submit Form"/>
□自定義按鈕：<button type="submit">Submit Form</button>
□圖像按鈕：<input type="image" src="graphic.gif"/>
②在提交表單時，瀏覽器會將請求發(fā)送給服務(wù)器之前觸發(fā)submit事件。這樣就有機會驗證表單數(shù)據(jù)，并據(jù)以決定是否允許表單提交。
var form = document.getElementById("myForm");
EventUtil.addHandler(form,"submit",function(event){
//取得事件對象
event = EventUtil.getEvent(event);
//阻止默認事件
EventUtil.preventDefault(event);
});
③提交表單的最大問題是重復(fù)提交表單。解決辦法：在第一次提交表單后就禁用提交按鈕。
④在JavaScript中，可以以編程方式提交表單。
var form = document.getElementById("myForm");
//提交表單
form.submit(); //此方法提交表單不會觸發(fā)submit事件
1.2 重置表單
①重置表單方式
□通用按鈕：<input type="reset" value="Reset Form"/>
□自定義按鈕：<button type="reset">Rest Form</button>
②用戶單擊重置按鈕重置表單是，會觸發(fā)reset事件，利用這個機會可在必要時取消重置操作。
③可用JavaScript重置表單：form.reset()；與調(diào)用submit()方法不同，調(diào)用reset()方法會想單擊重置按鈕一樣觸發(fā)reset事件。
1.3表單字段
①訪問表單字段方法：
□使用原生DOM方法。
□通過表單的elements屬性，該屬性是表單中所有元素的集合。
◇表單字段按標(biāo)記順序保存在elements中。
◇可以按照位置和name特性訪問它們。
◇如果多個表單控件都使用一個name特性，則返回一個NodeList。
var form = document.getElementById("form1");
//取得表單中的第一個字段
var field1 = form.elements[0];
//取得名為textbox1的字段
var field2 = form.elements["textbox1"];
//取得表單中包含的字段的數(shù)量
var fieldCount = form.elements.length;
1.3.1 共有的表單字段屬性
①表單字段共有的屬性和方法如下：
□disabled：布爾值，表示當(dāng)前字段是否被禁用。
□form：指向當(dāng)前字段所屬表單的指針，只讀。
□name：當(dāng)前字段的名稱。
□readOnly：布爾值，表示當(dāng)前字段是否只讀。
□tabIndex：表示當(dāng)前字段的切換（tab）序號。
□type：當(dāng)前字段的類型，如：“checkbox”、“radio”等等。
□value：當(dāng)前字段將被提交給服務(wù)器的值。
②不能用click事件處理submit事件，因不知道在submit前觸發(fā)click還是submit后觸發(fā)click。
1.3.2 共有的表單字段方法
□focus()方法：將瀏覽器的焦點設(shè)置到表單字段。
□blur()方法：從元素中移走焦點。
1.3.3 共有的表單字段事件
除了支持鼠標(biāo)事件、鍵盤、變動和HTML事件外，所以表單字段支持下列3個事件：
□blur：當(dāng)前字段失去焦點時觸發(fā)。
□change：對于<input>和<textarea>元素，他們失去焦點切value值改變時觸發(fā)；對于<select>元素，在其選項改變時觸發(fā)。
□focus：當(dāng)前字段獲得焦點時觸發(fā)。
2.文本框腳本
①在HTML中兩種方法表現(xiàn)文本框
□使用<input>元素的單行文本框
◇顯示25個字符，輸入不超過50個字符。size="25" maxlength="50"
□<textarea>元素，多行文本框
◇25行，5列。rows="25" cols="5"
②設(shè)置文本框的值
□使用value屬性讀取或設(shè)置文本框的值，不建議使用DOM方法。
□使用DOM方法：setAttribute()設(shè)置value特性或修改<textarea>元素第一個子節(jié)點這樣對value值的修改不一定反映到DOM中。
2.1 選擇文本
①<input>單行文本和<textarea>多行文本都支持select()方法，這個方法用于選擇文本框中所有文本。
EventUtil.addHandler(textbox, "focus", function(){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});
2.1.1 選擇（select）事件
select事件觸發(fā)的情況復(fù)雜，要想編寫跨瀏覽器代碼，必須手工取得對事件目標(biāo)的引用：
var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox,"select",function(event){
var target = document.forms[0].elements["textbox1"];
alert("text selected");
});
2.1.2 取得選擇的文本
□文本框的兩個屬性：selectionStart和selectionEnd?；?的數(shù)值，表示所選文本范圍。FF、Safari、Chrome、Opera支持。
□IE有一個document.select對象，其中保存用戶整個文檔范圍內(nèi)選擇的文本信息。與select事件一起，可假定為文本內(nèi)容。取值前須創(chuàng)建一個范圍。
function getSelectedText(textbox){
if(document.selection){
return document.selection.createRange().text;
}else{
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
}
2.1.3 選擇部分文本
□setSelectionRange()方法。接受兩個參數(shù)：要選擇的第一個字符的索引和要選擇的最后一個字符之后的字符索引。FF、Chrome、Safari、Opera支持。
□IE為文本框提供了createTextRange()方法，要選擇文本框中的部分文本，必須首先使用這個方法創(chuàng)建一個范圍，并將其放在恰當(dāng)位置上。再使用moveStart()和moveEnd()這兩個方法將范圍移動位置。
□兼容代碼
function selectText(textbox,strtIndex,stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex,stopIndex);
}else if(textbox.createTextRange){
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("character",startIndex);
range.moveEnd("charater",stopIndex-startIndex);
range.select();
}
Textbox.focus();
}
2.2.1 過濾輸入
例為屏蔽非數(shù)字值，而不屏蔽ctrl組合鍵
EventUtil.addHandler(textbox,"keypress",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharcode(event);
if(!/\d/.test(String.fromCharCode(charCode))&&charCode>9&&!event.ctrlkey){
EventUtil.preventDefault(event);
}
});
2.2.2 操作剪貼板
①6個剪貼板事件：
□beforecopy：在發(fā)生復(fù)制操作前觸發(fā)；
□copy：在發(fā)生復(fù)制操作時觸發(fā)
□beforecut：在發(fā)生剪切操作時觸發(fā)。
□cut：在發(fā)生剪切操作時觸發(fā)
□beforepaste：在發(fā)生粘貼操作前觸發(fā)
□paste：在發(fā)生粘貼操作時觸發(fā)
②訪問剪貼板中數(shù)據(jù)，可使用clipboaredData對象，有3個方法：
getDate()、setDate()和clearData()
兼容方法：
var EventUtil = {
getClipboardText : function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
setClipboardText : function(event, value){
if(event.clipboardData){
return event.clipboardData.setData("text/pain",value);
}else if(window.clipboardData){
return window.clipboardData.setData("text",value);
}
},
};
3.選擇框腳本
①選擇框是通過<select>和<option>元素創(chuàng)建的。HTMLSelectElement類型還提供了下列屬性和方法：
□add(newOption, relOption)：向空間按中插入新元素，其位置在指定項relOption之前
□multiple：布爾值，表示是否允許多項選擇；等價于HTML中的multiple特性。
□options：控件中所有<option>元素的HTMLCOllection。
□remove(index)：移除給定位置選項。
□selectedIndex：基于0的選中項的索引，如果沒有選中項，則值為-1.對于支持多選的控件，只保存選項中第一項的索引。
□size：選擇框中可見的行數(shù)；等價于HTML中的size特性
□type："select-one"或"select-multiple"，取決于HTML代碼中有沒multiple特性。
□value：取決于當(dāng)前選中項。
②DOM中，每個<option>元素都有一個HTMLOptionElement對象表示。其對象添加以下屬性：
□index：當(dāng)前選項在options集合中的索引
□label：當(dāng)前選項的標(biāo)簽；等價于HTML中的label特性
□selected：布爾值，表示當(dāng)前選項是否被選中。設(shè)true可選中。
□text：選項的文本
□value：選項的值（等價于HTML中的value特性）
3.1 選擇選項
□對于只允許一項的選擇框，使用選擇框的selectedIndex屬性。
var selectedOption = selectbox.options[selectbox.selectedIndex];
□對于多選的選擇框，遍歷檢查其selected屬性。
3.2 添加選項
①DOM方法：
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text");
newOption.setAttribute("value","Option value");
selectbox.appendChild(newOption);
②Option構(gòu)造函數(shù)，接受兩個參數(shù)：文本（text）和值（value）；第二個可選。（IE不可用）
Var newOption = new Option("Option text","Option value");
Selectbox.appendChild(newOption); //在IE中有問題
③使用選擇框的add()方法，接受兩個參數(shù)：要添加的新選項和將位于新選項之后的選項。
Var newOption = new Option("Option text", "Option value");
Selectbox.add(newOption, undefined); //最佳方案
3.3 移除選項
①可使用DOM的removeChild()方法，為其傳入要移除的項。
selectbox.removeChild(selectbox.option[0]);
②使用選擇框的remove()方法。接受一個參數(shù)，即要移除項的索引。
selectbox.remove(0); //移除第一個選項
③將相應(yīng)項設(shè)為null
3.4 移動和重排選項
①使用appendChild()方法，講一個選擇框中選項移到另一個選擇框。
②使用insertBefore()實現(xiàn)重排
4.表單序列化
①瀏覽器發(fā)數(shù)據(jù)至服務(wù)器方式：
□對表單字段的名稱和值進行URL編碼，使用和號（&）分隔。
□不發(fā)送禁用的表單字段
□只發(fā)送勾選的復(fù)選框和單選按鈕
□不發(fā)送type為“reset”和“button”的按鈕。
□多選選擇框中的每個選中值單獨一個條目。
□在單擊提交按鈕表單的情況下，也會發(fā)送提交按鈕；否則，不發(fā)送提交按鈕。也包括type為"image"的<input>元素。
□<select>元素的值，就是選中<option>元素的value特性的值。如果<option>元素沒有value特性，則是<option> 元素的文本值。
②表單序列化代碼：
function serialize(form){
var parts = new Array();
var field = null;
for(var i = 0, len = form.elements.length; i < len; i++){
field = form.elements[i];
switch(field.type){
case "select-one" :
case "select-multiple" :
for(var j=0, optLen = field.options.length; j<optLen; j++){
var option = field.options[j];
if(option.selected){
var optValue=" ";
if(potion.hasAttribue){
optValue = (option.hasAttribute("value") ? Option.value : option.text);
}else{
optValue = (option.attributes["value"].specified ? Option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
case undefined : //字段集
case "file" : //文件輸入
case "submit" : //提交按鈕
case "reset" : //自定義按鈕
Break;
case "radio" : //單選按鈕
case "checkbox" : //復(fù)選框
If(!field.checked){break;}
default :
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.name));
return parts.join("&");
}
}
}
5.富文本編輯（略）