javascript
JS事件及其兼容用法
JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。
?
1、事件流：描述的是從頁面中接收事件的順序。
IE提出的事件冒泡流：事件開始由最具體的元素接收，然后向上傳播到較為不具體的節點。
Nerscape提出的事件捕獲流：由最不具體的元素逐漸傳播到最具體的節點。
DOM2級事件規定了事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發生的是事件捕獲，為截獲事件提供了機會。然后實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。
?
2、事件處理程序：響應事件的函數。名字一般以“on”開頭，如onclick、onload、onmouseover...?添加事件處理程序有3種方法：HTML事件處理程序、DOM0級事件處理程序、DOM2級事件處理程序.
HTML事件處理程序：某個元素支持某種事件，都可以使用一個與相應事件處理程序同名的HTML特性來指定。
例如：?<input type = "button" value = "Click" onclick = "alert('Click')" />?,由于這個值是JavaScript，因此不能在其中使用未轉義的HTML語法字符，例如&、“”、<、>。若要使用引號，可以這么來用：?<input type = "button" value = "Click" onclick = "alert("Click")" />?
DOM0級事件處理程序：將一個函數賦值給一個事件處理程序。例如：
1?var?btn?=?document.getElementById("myBtn");2?btn.onclick?=?function(){3?????alert("Click");4?};同時，也可以刪除DOM0級方法指定的事件處理程序，只要設置為null即可：?btn.onclick =?null;?//刪除DOM0級事件處理程序?
DOM2級事件處理程序：“DOM2級事件”定義了倆個?方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()，接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值，布爾值如果為true，表示在捕獲階段調用事件處理函數；如果是false(默認)，在冒泡階段調用。同時，IE有自己“獨特”的事件處理程序去替代這倆個方法：attachEvent()和detachEvent().這樣一來，我們就得苦逼的想著如何兼容倆者了，常用的做法如下：
?1?var?eventUtil={?//type事件不加on！?2????????????//添加句柄?3???????????addHandle:function?(element,type,handler){?4??????????????????if(element.addEventListener){?5???????????????????????element.addEventListener(type,handler,false);?6??????????????????}else?if(element.attachEvent){?7???????????????????????element.attachEvent("on"+type,handler);?8??????????????????}else{?9???????????????????????element["on"+type].handler;10??????????????????}11????????????}12?????????????//刪除句柄---匿名函數不能被移除13???????????removeHandle:function?(element,type,handler){14??????????????????if(element.removeEventListener){15???????????????????????element.removeEventListener(type,handler,false);16??????????????????}else?if(element.detachEvent){17???????????????????????element.detachEvent("on"+type,handler);18??????????????????}else{19???????????????????????element["on"+type]=null;20??????????????????}? 21???????????}22?}????? 23?24?eventUtil.addHandle(oBtn,'click',show);????//調用方法?
3、事件對象：在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象包含著所有與事件有關的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關的信息。
事件對象的獲取和屬性方面，IE有顯得那么“特殊”。因此，我們處處要想著兼容它。有關事件對象和對象屬性，常用的兼容方法如下：
?1?var?eventUtil={???2?????????????//獲取事件對象?3????????????getEvent?:?function?(event){?4?????????????????????????return?event???event?:?window.event;?5????????????}?6????????????//獲取事件目標??????7????????????getElement?:?function(event){??//傳入獲取到的事件對象??8??????????????????return?event.target?||?event.srcElement;?9????????????}10??????????????//阻止事件冒泡11????????????stopPropagation:function(event){???//傳入獲取到的事件對象?12???????????????????if(event.stopPropagation){13?????????????????????????event.stopPropagation;14???????????????????}else{15??????????????????????????event.cancelBubble=true;16???????????????????}17?????????????}18??????????????//阻止默認行為19?????????????preventDefault:function(event){???//傳入獲取到的事件對象?20??????????????????if(event.preventDefault){21?????????????????????????event.preventDefault;22??????????????????}else{23?????????????????????????event.returnValue=false;24??????????????????}? 25????????????}26?}具體用法：?
?use
?
? 4、事件類型：Web瀏覽器中可能發生的事情有很多類型，不同的事件類型具有不同的信息。?“DOM3級事件”規定了以下幾類屬性：
?UI（User?Interface，用戶界面）事件，當用戶與頁面上的元素交互時觸發；
焦點事件，當元素獲取或失去焦點時觸發；
鼠標事件，當用戶通過鼠標在頁面上執行操作時觸發；
滾輪事件，當使用滾輪（或類似設備）時觸發；
文本事件，當在文檔中輸入文本時觸發；
鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發；
合成事件，當為IME（Input?Method?Editor，輸入法編輯器）輸入字符時觸發；
變動（mutation）事件，當底層DOM結構發生變化時觸發；
變動名稱事件，當元素或屬性名變動時觸發。此類事件已被廢棄。
?
?4.1??UI事件：指的是那些不一定與用戶操作有關的事件。這些事件在DOM規范出現之前，都是以這種形式存在的，現有的UI事件如下：
load：當頁面完全加載后再window上觸發。
unload：當頁面完全卸載后再window上觸發。
error：當發生JavaScript錯誤時在window上面觸發。
select：當用戶選擇文本框（<input>或<textarea>）中的一或多個字符時觸發。即復制開始時觸發。
resize：當窗口或框架的大小變化在window或框架上觸發。
scroll：但用戶滾動條的元素中內容時，在該元素上面觸發。<body>元素中包含所加載頁面的滾動條。
?
4.2??焦點事件：焦點事件會在頁面元素獲得或失去焦點時觸發。
blur：在元素失去焦點時觸發。這個事件不會冒泡；所有瀏覽器都支持它。
focus：在元素獲得時觸發。這個事件不會冒泡；所有瀏覽器都支持它。
focusout：與blur等價。
focusin：與focus等價，但它冒泡。
DOMFocusIn：在元素獲得焦點時觸發。這個事件和focus等價，但它冒泡。只有Opera支持，且在DOM3級事件廢除了，選擇了focusin。
DOMFocusOut：在元素失去焦點時觸發。這個事件是blur的通用版本。只有Opera支持。DOM3級事件廢除了，選擇了focusout。
?
4.3??鼠標與滾輪事件
click：在用戶單擊主鼠標按鈕或按下回車鍵時觸發。
dblclick：在用戶雙擊主鼠標時觸發。
mousedown：在用戶按下了任意鼠標按鈕時觸發。不能通過鍵盤觸發這個事件。
mouseup：在用戶釋放鼠標按鈕時觸發。不能通過鍵盤觸發這個事件。
mouseout：在鼠標指針位于一個元素上方，然后用戶將其移入另一個元素時觸發。又移入的另一個元素可能位于前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤事件觸發。
mouseover：在鼠標指針位于一個元素外部，然后用戶將其首次移入另一個元素邊界之內時觸發。不能通過鍵盤事件觸發這個事件。
mouseenter：在鼠標光標從元素外部首次移動到元素范圍之內觸發。這個事件不冒泡，而且在光標移動到后代元素上不會觸發。DOM3級納入規范。IE、Firefox 9+和Opera支持。
mouseleave：在位于元素上方的光標移動到元素范圍之外時觸發。這個事件不冒泡，而且在光標移動到后代元素上不會觸發。DOM3級納入規范。IE、Firefox 9+和Opera支持。
?
4.3.1?客戶區坐標位置
1?var?div?=?document.getElementById("myDiv");2?EventUtil.addHandler(div,?"click",?function(event){3?????event?=?EventUtil.getEvent(event);???//獲取事件對象4?????alert("Client?coordinates?:?"?+?event.clientX?+?","?+event,clientY);??//相對于瀏覽器窗口位置5?});
4.3.2?頁面坐標位置
1?var?div?=?document.getElementById("myDiv");2?EventUtil.addHandler(div,?"click",?function(event){3?????event?=?EventUtil.getEvent(event);4?????alert("Page?coordation:?"+event.pageX?+?","?+?event.pageY);//相對文檔坐標5?}IE8之前不支持，因此要用clientX/Y??和?滾動信息計算出來。這個時候需要document.body(混雜模式)或documentElement(標準模式)中的scrollLeft和scrollTop屬性。計算過程如下：
?View Code
4.3.3?屏幕坐標位置
var?div?=?document.getElementById("myDiv"); EventUtil.addHandler(div,?"click",?function(event){event?=?EventUtil.getEvent(event);alert("Screen?coordation:?"+event.screenX?+?","?+?event.screenY);//相對電腦屏幕坐標}
4.3.4?修改鍵
雖熱鼠標事件主要是使用鼠標來觸發的，但在按下鼠標時鍵盤上的某些鍵的狀態也是可以影響到所要采取的操作。這些修改鍵就是Shift、Ctrl、Alt和Meta（在window鍵盤中的Window鍵，在蘋果機中的Cmd鍵），它們經常被用來修改鼠標事件的行為。DOM為此規定了4個屬性，表示這些修改鍵的狀態：shiftKey、ctrlKey、altKey和metaKey。這些屬性包含的都是布爾值，如果相應的鍵被按下，則值為true，否則為false。當某個鼠標事件發生時，通過檢測這幾個屬性就可以確定用戶是否按下了其中的鍵。下面來舉個例子：
?View Code
4.3.5?鼠標滾輪事件
觸發鼠標滾輪事件后，生成的事件對象有一個屬性叫：wheelDelta，它是一個數值。在不同的瀏覽器不同的滾動方向有不同的數值，因此，我們還要去兼容它。
?1?var?eventUtil?={?2??????//獲取鼠標滾輪屬性值?3?????getWheelDelta:function(event)?{?4??????????if(event.wheelDelta)?{?5??????????????return?(client.engine.opera?&&?client.engine.opera?<?9.5???-event.wheelDelta?:?event.wheelDalta);??//針對Opera瀏覽器?6??????????}else{?7??????????????return?-event.detail?*?40;?8??????????}?9?????}10?}具體用法：
?View Code
?
4.4?鍵盤和文本事件：用戶在使用鍵盤時會觸發鍵盤事件。
有3個鍵盤事件，簡述如下：
keydown：當用戶按下鍵盤上的任意鍵時觸發，而且如果按住不放的話，會重復觸發此事件。
keypress：當用戶按下鍵盤上的字符鍵時觸發，而且如果按住不放的話，會重復觸發此事件。
keyup：當用戶釋放鍵盤上的鍵時觸發。
只有一個文本事件：textInput。這個事件是對keypress的補充，用意是將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會觸發textInput事件。
在用戶按了一個字符鍵時，首先觸發keydown事件，然后緊跟著是keypress事件，最后觸發keyup事件。其中，keydown和keypress都是在文本框發生變化之前被觸發；而keyup事件則是在文本框已經發生變化之后被觸發。
4.4.1?鍵碼
在發生keydown和keyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符鍵，keyCode屬性的值與ASCII碼中對應小寫字母的編碼相同——與Shift狀態無關。DOM和IE的event對象都支持keyCode屬性。
?keyCode用法
4.4.2?字符編碼
發生keypress事件意味著按下的鍵會影響到屏幕中文本的顯示。在所有瀏覽器中，按下能夠插入或刪除字符的鍵都會觸發keypress事件；按下其他鍵能否觸發此事件因瀏覽器而異。IE9+、Firefox、Chrome和Safiri的event對象都支持一個charCode屬性，這個屬性只有發生在keypress事件時才包含值，而且這個值是按下的那個鍵所代表字符的ASCII編碼。此時keyCode通常等于0或者也等于所按鍵的鍵碼。IE8及之前版本和Opera則是在keyCode中保存字符的ASCII編碼。想要以跨瀏覽器的方式取得字符編碼，必須首先檢測charCode屬性是否可用，如果不可用則使用keyCode，如下：
1?var?eventUtil?=?{2??????//省略其他代碼3?????getCharCode:?function(event)?{4?????????if(typeof?event.charCode?==?"number"){??//判斷是否支持charCode屬性5?????????????return?event.charCode;6?????????}else{7?????????????return?event.keyCode;8?????????}，9?}；具體用法：
?keyCode/charCode用法
附：有關鍵盤事件和鍵盤事件對象屬性請參考——JS之keyCode、charCode、which對比.
?
4.4.3??textInput事件?
“DOM3級事件”規范中引入了一個新事件，名叫textInput。根據規范，當用戶在可編輯區域中輸入字符時，就會觸發這個事件。這個用于替代keypress的textInput事件的行為稍有不同。區別之一就是任何可以獲得焦點的元素都可以觸發keypress事件，但只有可編輯區域才能觸發textInput事件。區別之二是textInput事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發，而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發（例如退格鍵）。該事件對象還有一個屬性叫data。這個屬性的值就是輸入的字符本身的值。先觸發該事件，才能顯示該字符。
本文轉自 ?zddnd ?51CTO博客，原文鏈接:http://blog.51cto.com/13013666/1940149
總結
以上是生活随笔為你收集整理的JS事件及其兼容用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Asp.net 关于错误提示 类型“XX
- 下一篇： JavaScript实现按键精灵