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

最新評(píng)論