JS事件及其兼容用法

JavaScript與HTML之間的交互是通過事件實現(xiàn)的。事件，就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間。

　　1、事件流：描述的是從頁面中接收事件的順序。

　　IE提出的事件冒泡流：事件開始由最具體的元素接收，然后向上傳播到較為不具體的節(jié)點。

　　Nerscape提出的事件捕獲流：由最不具體的元素逐漸傳播到最具體的節(jié)點。

　　DOM2級事件規(guī)定了事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機會。然后實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應(yīng)。

　　2、事件處理程序：響應(yīng)事件的函數(shù)。名字一般以“on”開頭，如onclick、onload、onmouseover... 添加事件處理程序有3種方法：HTML事件處理程序、DOM0級事件處理程序、DOM2級事件處理程序.

　　HTML事件處理程序：某個元素支持某種事件，都可以使用一個與相應(yīng)事件處理程序同名的HTML特性來指定。

例如： <input type = "button" value = "Click" onclick = "alert('Click')" /> ,由于這個值是JavaScript，因此不能在其中使用未轉(zhuǎn)義的HTML語法字符，例如&、“”、<、>。若要使用引號，可以這么來用： <input type = "button" value = "Click" onclick = "alert(&quot;Click&quot;)" /> 

　　DOM0級事件處理程序：將一個函數(shù)賦值給一個事件處理程序。例如：

1 var btn = document.getElementById("myBtn");2 btn.onclick = function(){3     alert("Click");4 };

同時，也可以刪除DOM0級方法指定的事件處理程序，只要設(shè)置為null即可： btn.onclick = null; //刪除DOM0級事件處理程序 

　　DOM2級事件處理程序：“DOM2級事件”定義了倆個 方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()，接收3個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值，布爾值如果為true，表示在捕獲階段調(diào)用事件處理函數(shù)；如果是false(默認)，在冒泡階段調(diào)用。同時，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             //刪除句柄---匿名函數(shù)不能被移除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);    //調(diào)用方法

　　3、事件對象：在觸發(fā)DOM上的某個事件時，會產(chǎn)生一個事件對象event，這個對象包含著所有與事件有關(guān)的信息。包括導(dǎo)致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。

事件對象的獲取和屬性方面，IE有顯得那么“特殊”。因此，我們處處要想著兼容它。有關(guān)事件對象和對象屬性，常用的兼容方法如下：

 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瀏覽器中可能發(fā)生的事情有很多類型，不同的事件類型具有不同的信息。 “DOM3級事件”規(guī)定了以下幾類屬性：

 UI（User Interface，用戶界面）事件，當(dāng)用戶與頁面上的元素交互時觸發(fā)；

焦點事件，當(dāng)元素獲取或失去焦點時觸發(fā)；

鼠標事件，當(dāng)用戶通過鼠標在頁面上執(zhí)行操作時觸發(fā)；

滾輪事件，當(dāng)使用滾輪（或類似設(shè)備）時觸發(fā)；

文本事件，當(dāng)在文檔中輸入文本時觸發(fā)；

鍵盤事件，當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)；

合成事件，當(dāng)為IME（Input Method Editor，輸入法編輯器）輸入字符時觸發(fā)；

變動（mutation）事件，當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)；

變動名稱事件，當(dāng)元素或?qū)傩悦儎訒r觸發(fā)。此類事件已被廢棄。

 4.1  UI事件：指的是那些不一定與用戶操作有關(guān)的事件。這些事件在DOM規(guī)范出現(xiàn)之前，都是以這種形式存在的，現(xiàn)有的UI事件如下：

load：當(dāng)頁面完全加載后再window上觸發(fā)。

unload：當(dāng)頁面完全卸載后再window上觸發(fā)。

error：當(dāng)發(fā)生JavaScript錯誤時在window上面觸發(fā)。

select：當(dāng)用戶選擇文本框（<input>或<textarea>）中的一或多個字符時觸發(fā)。即復(fù)制開始時觸發(fā)。

resize：當(dāng)窗口或框架的大小變化在window或框架上觸發(fā)。

scroll：但用戶滾動條的元素中內(nèi)容時，在該元素上面觸發(fā)。<body>元素中包含所加載頁面的滾動條。

4.2  焦點事件：焦點事件會在頁面元素獲得或失去焦點時觸發(fā)。

blur：在元素失去焦點時觸發(fā)。這個事件不會冒泡；所有瀏覽器都支持它。

focus：在元素獲得時觸發(fā)。這個事件不會冒泡；所有瀏覽器都支持它。

focusout：與blur等價。

focusin：與focus等價，但它冒泡。

DOMFocusIn：在元素獲得焦點時觸發(fā)。這個事件和focus等價，但它冒泡。只有Opera支持，且在DOM3級事件廢除了，選擇了focusin。

DOMFocusOut：在元素失去焦點時觸發(fā)。這個事件是blur的通用版本。只有Opera支持。DOM3級事件廢除了，選擇了focusout。

4.3  鼠標與滾輪事件

click：在用戶單擊主鼠標按鈕或按下回車鍵時觸發(fā)。

dblclick：在用戶雙擊主鼠標時觸發(fā)。

mousedown：在用戶按下了任意鼠標按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

mouseup：在用戶釋放鼠標按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

mouseout：在鼠標指針位于一個元素上方，然后用戶將其移入另一個元素時觸發(fā)。又移入的另一個元素可能位于前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤事件觸發(fā)。

mouseover：在鼠標指針位于一個元素外部，然后用戶將其首次移入另一個元素邊界之內(nèi)時觸發(fā)。不能通過鍵盤事件觸發(fā)這個事件。

mouseenter：在鼠標光標從元素外部首次移動到元素范圍之內(nèi)觸發(fā)。這個事件不冒泡，而且在光標移動到后代元素上不會觸發(fā)。DOM3級納入規(guī)范。IE、Firefox 9+和Opera支持。

mouseleave：在位于元素上方的光標移動到元素范圍之外時觸發(fā)。這個事件不冒泡，而且在光標移動到后代元素上不會觸發(fā)。DOM3級納入規(guī)范。IE、Firefox 9+和Opera支持。

　　4.3.1 客戶區(qū)坐標位置

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 修改鍵

　　雖熱鼠標事件主要是使用鼠標來觸發(fā)的，但在按下鼠標時鍵盤上的某些鍵的狀態(tài)也是可以影響到所要采取的操作。這些修改鍵就是Shift、Ctrl、Alt和Meta（在window鍵盤中的Window鍵，在蘋果機中的Cmd鍵），它們經(jīng)常被用來修改鼠標事件的行為。DOM為此規(guī)定了4個屬性，表示這些修改鍵的狀態(tài)：shiftKey、ctrlKey、altKey和metaKey。這些屬性包含的都是布爾值，如果相應(yīng)的鍵被按下，則值為true，否則為false。當(dāng)某個鼠標事件發(fā)生時，通過檢測這幾個屬性就可以確定用戶是否按下了其中的鍵。下面來舉個例子：

 View Code

　　4.3.5 鼠標滾輪事件

　　觸發(fā)鼠標滾輪事件后，生成的事件對象有一個屬性叫：wheelDelta，它是一個數(shù)值。在不同的瀏覽器不同的滾動方向有不同的數(shù)值，因此，我們還要去兼容它。

 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 鍵盤和文本事件：用戶在使用鍵盤時會觸發(fā)鍵盤事件。

　　有3個鍵盤事件，簡述如下：

keydown：當(dāng)用戶按下鍵盤上的任意鍵時觸發(fā)，而且如果按住不放的話，會重復(fù)觸發(fā)此事件。

keypress：當(dāng)用戶按下鍵盤上的字符鍵時觸發(fā)，而且如果按住不放的話，會重復(fù)觸發(fā)此事件。

keyup：當(dāng)用戶釋放鍵盤上的鍵時觸發(fā)。

　　只有一個文本事件：textInput。這個事件是對keypress的補充，用意是將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會觸發(fā)textInput事件。

在用戶按了一個字符鍵時，首先觸發(fā)keydown事件，然后緊跟著是keypress事件，最后觸發(fā)keyup事件。其中，keydown和keypress都是在文本框發(fā)生變化之前被觸發(fā)；而keyup事件則是在文本框已經(jīng)發(fā)生變化之后被觸發(fā)。

　　4.4.1 鍵碼

　　在發(fā)生keydown和keyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應(yīng)。對數(shù)字字母字符鍵，keyCode屬性的值與ASCII碼中對應(yīng)小寫字母的編碼相同——與Shift狀態(tài)無關(guān)。DOM和IE的event對象都支持keyCode屬性。

 keyCode用法

　　4.4.2 字符編碼

　　發(fā)生keypress事件意味著按下的鍵會影響到屏幕中文本的顯示。在所有瀏覽器中，按下能夠插入或刪除字符的鍵都會觸發(fā)keypress事件；按下其他鍵能否觸發(fā)此事件因瀏覽器而異。IE9+、Firefox、Chrome和Safiri的event對象都支持一個charCode屬性，這個屬性只有發(fā)生在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用法

　　附：有關(guān)鍵盤事件和鍵盤事件對象屬性請參考——JS之keyCode、charCode、which對比.

　　4.4.3  textInput事件 

　　“DOM3級事件”規(guī)范中引入了一個新事件，名叫textInput。根據(jù)規(guī)范，當(dāng)用戶在可編輯區(qū)域中輸入字符時，就會觸發(fā)這個事件。這個用于替代keypress的textInput事件的行為稍有不同。區(qū)別之一就是任何可以獲得焦點的元素都可以觸發(fā)keypress事件，但只有可編輯區(qū)域才能觸發(fā)textInput事件。區(qū)別之二是textInput事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發(fā)，而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發(fā)（例如退格鍵）。該事件對象還有一個屬性叫data。這個屬性的值就是輸入的字符本身的值。先觸發(fā)該事件，才能顯示該字符。