|
|
| 事件 | 描述 |
| abort | 圖片被阻止而不能加載 |
| blur,focus | 失去焦點，獲得焦點 |
| change | 適用于表單元素，當元素使其焦點的時候判斷是否發生改變 |
| click,dblclick | 單擊，雙擊 |
| keydown,keyup,keypress | 按下鍵，鍵離開，按下鍵的時候觸發，注意keypress只對數字字母鍵有效 |
| load | 加載圖片或者頁面的時候 |
| mousedown,mouseup | 按下鍵，放開鍵 |
| mouseover,mouseout | over是當鼠標進入的時候出發，out是離開的時候觸發 |
| mousemove | 鼠標移動 |
| reset,submit | 重置和提交表單 |
以上僅僅是常用的事件的列表，完整具體的列表可以查找相關手冊。
1. 0級DOM上的事件處理
0級DOM上的事件處理方法是比較早的，目前也廣泛應用，從IE4.0開始就支持這類方法。
1.1 事件注冊
下面主要介紹如何添加響應事件，也就是為事件添加處理程序。
（1）內聯注冊（inline registration)
這是最簡單的一種，將事件響應程序作為html標簽的一個屬性來設置，如下例，可以是代碼，當然更多情況下是一個函數調用。事件的句柄一般就是事件的名稱加上前綴on。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
這種方法很簡單，任何瀏覽器都支持，缺點是將Javascript代碼和HTML代碼混雜在一起，而且不能動態添加事件響應程序，也不能添加多個響應程序。
（2）傳統模式(traditional registration)
這種模式將事件作為對象的屬性進行添加。例如：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
1.2 事件的參數（Event對象）
有些事件處理程序需要一些關于事件更多的信息，比如click事件發生的位置等。這些信息是通過事件參數傳給事件處理程序的。IE事件模型和W3C事件模型對此的實現是不同的。
IE把event對象作為window對象的一個屬性，而W3C把event對象作為處理程序的一個參數。下面以click事件為例，分別寫一個程序用于IE和支持W3C標準的瀏覽器。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
這一段頁面代碼可以把click事件對象的所有屬性都展示出來。上面的例子是W3C的瀏覽器所用的方法，要在IE下使用，只要改成onclick=”IEClick()”.注意，W3CClick中的參數名，只能是event。打印出來的屬性很多，我分別用FF3.5，Chrome3，IE8（標準模式和兼容模式）運行，他們共有的屬性并不多，其實也就這些共有的屬性才有意義，他們是:
altKey,shiftKey,ctrlKey:是否按下alt,shift,ctrl鍵
clientX,clientY:客戶區坐標（瀏覽器窗口）,screenX,screenY：屏幕區坐標
type:事件類型
雖然事件的參數的傳遞方式有點不同，但是對于寫跨瀏覽器的代碼也沒有造成太多的麻煩，只需要在函數一開始判斷下window.event有沒有定義即可。
復制代碼 代碼如下:
function BothClick(args) {
var evnt = window.event ? window.event : args;
alert(evnt.clientX);
}
注冊句柄為:<div id="adiv" onclick="BothClick(event)" >a</div>如果采用第二種方式注冊句柄，則不需要什么特別處理。
1.3 事件的浮升
頁面上的對象通常是重疊的，比如一個div中可以包括若干div或者其他元素。當某一事件觸發的時候，同時有多個元素受影響，并且它們都有相應的事件處理程序，那么這些事件處理程序執行哪些？以何種順序執行？這就是本節要討論的問題。通常情況下，一個事件被多個句柄捕獲的情形并不多見。先看一個例子(CSS省略)：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
在body，外層div和內層div都響應了click事件，結果如下：
可見，事件是由內向外層的元素依次觸發的。（一般教材上的說法是向上浮升，bubbling,我覺得這個向上是有歧義的，我一開始就誤認為內層的元素是上面的，因為它能覆蓋外層的元素）用0級DOM注冊的事件，它的浮升方法無論是IE還是W3C都是統一的。
1.4 浮升的取消
有時候我們需要在響應了一個事件之后，就不需要外層的元素再響應了，可以取消事件的浮升。取消的方法IE和W3C是不一致的。IE是通過設置事件對象的cancelBubble屬性來實現，W3C則是調用事件對象的stopPropagation方法。
例如上面的例子改為：
復制代碼 代碼如下:
function inner_click(arg){
var evnt=window.event?window.event:arg;
var dis=document.getElementById("res");
dis.innerHTML+="Inner Click <br/>";
if(evnt.stopPropagation){
evnt.stopPropagation();
}else{
evnt.cancelBubble=true;
}
}<div id="innerdiv" onclick="inner_click(event)" >
其他不變，這樣就只能看到一行輸出。
1.5 事件處理函數中的this
這個this指向的是觸發事件的對象。
下面介紹2級DOM的事件句柄。這種方式是比較新的方式，它不依賴于任何特定的事件句柄屬性。W3C規定的方式是
object.addEventListener(‘event',function,boolean)
第一個參數是事件名，第二個是事件響應函數，第三個變量如果是true，則事件函數在事件冒泡階段被觸發，否則是在事件的捕獲階段被觸發。W3C規定事件的發生有兩個階段，首先是捕獲，即事件以此從最外層層的元素向內層傳遞，相應的事件處理函數被依次觸發，然后是冒泡階段，事件從最內層的元素向外層傳遞。 看一個例子：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
點擊灰色框，會依次彈出body true,div true,div false,body false. 很遺憾，IE不支持這種方式,最新的IE8也不支持。不過IE也有類似的注冊事件的方法，名字是attachEvent.不過這個方法沒有第三個參數，它支持冒泡階段的事件響應。attachEvent函數傳遞事件參數的時候是和W3C一致的，也是通過event參數傳遞，但是，其函數內部的this指向的不是觸發事件對象，而永遠指向window。在event對象中有一個屬性指向觸發該事件的對象，W3C中是target,IE中是srcElement, 在符合W3C規范的瀏覽器中，事件處理函數中的this和event.target指向的是同一個對象。下面的程序展示了一個IE和W3C兼容的事件處理程序：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
事件處理程序中W3C和IE還有諸多不一致之處，十分麻煩。好在大多都有較好的解決方案。更多信息請參考http://www.quirksmode.org/js/events_events.html
JavaScript技術：Javascript 瀏覽器事件小結，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
