Web瀏覽器能夠發生的事件有很多種類型，不同的事件類型有不同的事件信息。DOM3級的事件類型主要包括：UI事件，用戶與頁面上的元素交互時觸發；焦點事件，元素獲得或失去焦點觸發；鼠標事件，用戶通過鼠標在頁面上執行操作時觸發；滾輪事件，使用鼠標滾輪時觸發；文本事件，當在文檔中輸入文本時觸發；鍵盤事件，用戶通過鍵盤在頁面上操作觸發；合成事件，當為IME輸入字符時觸發；變動事件，底層DOM結構發生變化時觸發。

• UI事件

　　UI事件的觸發並不一定是由用戶操作觸發的，包括：load，頁面完全加載後在window上觸發該事件、當所有框架都加載完畢時觸發、當圖片加載完畢時在img上觸發、當嵌入的元素加載完成時在object上面觸發；unload事件，當頁面完全卸載後在window上面觸發、當所有框架都卸載完成時在框架集上觸發、當嵌入的內容卸載完畢後在object上觸發；abort事件，在用戶停止下載過程時，如果嵌入的內容未加載完成，則在object上面觸發；error事件，當發生JavaScript腳本錯誤時觸發，當無法加載圖像時，在img元素上觸發，當無法加載嵌入內容時在object上觸發，當框架無法加載時觸發；select事件，當用戶選擇文本框的內容時觸發；resize事件，當瀏覽器窗口大小改變時觸發；scroll事件，當用戶滾動帶滾動條的元素時觸發。

1 EventUtil.addEvent(window,"load",function(){
2                 console.log(document.getElementById("aa").innerHTML);//2223             });

　　上面的代碼添加了load事件，當頁面加載完成後就會觸發該事件。使用load事件能夠確保事件是在頁面元素加載完成後觸發，不活出現錯誤。如果我們在頁面元素位加載完成，就去獲取頁面上的元素，則會產生錯誤。

1 var img=document.getElementById("imgtest");
2             EventUtil.addEvent(img,"load",function
 
(event){
3                 event=EventUtil.getEvent(event);4                  console.log(event.currentTarget.src);
5             });

　　上面的代碼在img的圖片加載完成後，會觸發load事件，在load事件中，我們獲取了event對象，並通過event對象的屬性currentTarget取得了事件處理程序操作的元素。

1 var sc = document.createElement("script");
2             sc.src="js/checkboxdemo.js";
 
3             EventUtil.addEvent(sc,"load",function(event){
4                 console.log("loaded");
5             });
6             document.head.appendChild(sc);

　　上面的代碼，動態向head添加腳本文件，並且綁定了load事件。

　　unload事件是與load事件對立的一個事件，這個事件在完全卸載後觸發。當用戶從一個頁面切換到另一個頁面就會觸發該事件。需要註意的是，在unload事件中不能dom元素進行操作，因為當unload事件執行的時候，所有的頁面元素都已經不存在。

　　當瀏覽器大小發生改變的時候會觸發resize事件。

1 EventUtil.addEvent(window,"resize",function(event){
2                 alert("resize");
3             });

　　需要註意的是不要再resize中添加大量的計算代碼，因為在瀏覽器窗口改變的時候，resize事件會被頻繁的觸發，會影響瀏覽器的性能。

• 焦點事件

　　焦點事件會在頁面獲得或失去焦點時觸發。利用這些事件，並於document.hasFocus()方法和document.activeElement屬性配合，可以知曉用戶在頁面上的行為。有6個焦點事件：blur事件，元素失去焦點時觸發事件，不會冒泡；focus事件，元素獲得焦點時觸發，不會冒泡；focusin事件，元素獲得焦點時觸發，會冒泡；focusout事件，元素失去焦點時觸發，會冒泡。當用戶在頁面上由一個元素移動到另一個元素事件觸發的順序為：focusout事件，在失去焦點的元素上觸發；focusin事件，在獲得焦點的元素上觸發；blur事件，在失去焦點的元素上觸發；focus事件，在獲得焦點的元素上觸發。

• 鼠標與滾輪事件　　

　　鼠標事件是WEB開發中最常用的事件。DOM3級中定義了9個鼠標事件：click事件，用戶單擊鼠標左鍵觸發的事件或者按下enter鍵觸發；dbclick事件，用戶雙擊鼠標左鍵的時候觸發；mousedown事件，用戶按下鼠標按鈕時觸發；mouseenter事件，用戶光標從元素外部首次移動到元素範圍之內觸發。這個事件不冒泡，而且光標在移動到後代元素上不會觸發；mouseleave事件，在位於元素上方的事件移動到元素範圍之外時觸發；mousemove事件，鼠標在元素內部移動時重復重復；mouseout事件，在鼠標指針位於一個元素上方然後用於將其移入另一個元素時觸發；mouseover事件，鼠標位於元素外部，然後用戶首次將其移入元素內部觸發；mouseup事件，釋放鼠標時觸發。

　　只有在同一個元素上觸發mousedown和mouseup事件，才會觸發click事件。只有觸發兩次click事件，才會觸發dbclick事件。

 1 var img=document.getElementById("imgtest");
 2             EventUtil.addEvent(img,"mousedown",function(event){
 3                 console.log(event.type);
 4             });
 5             EventUtil.addEvent(img,"mouseup",function(event){
 6                 console.log(event.type);
 7             });
 8             EventUtil.addEvent(img,"click",function(event){
 9                 console.log(event.type);
10             });
11             EventUtil.addEvent(img,"dblclick",function(event){
12                 console.log(event.type);
13             });

　　上面的代碼在img上註冊了mousedown、mouseup、click、dblclick事件。當雙擊img的時候，依次輸出：mousedown、mouseup、click、mousedown、mouseup、click、dblclick。

　　鼠標滾輪事件就是mousewheel事件，這個事件跟蹤鼠標滾輪。

 1 EventUtil.addEvent(document.getElementById("imgtest"),"mousemove",function(event){
 2                 event=EventUtil.getEvent();
 3                 var pageX=event.pageX,
 4                 pageY=event.pageY;
 5                 if(!event.pageX){
 6                     pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
 7                 }
 8                 if(!pageY){
 9                     pageY=event.clientY+(document.body.scrollTop||document.documentElement.scrollTop);
10                 }
11                 console.log(pageX+","+pageY);
12             })

　　上面的代碼能夠實時顯示鼠標的頁面位置信息。即使有了滾動條，依然能夠正確計算。

• 鍵盤與文本事件

　　用戶在使用鍵盤時會觸發鍵盤事件，有3個事件：keydown事件，當用戶按下鍵盤上任意鍵時觸發，如果按住不放會重復觸發此事件；keypress事件，當用戶按下鍵盤上的字符鍵時觸發，如果按住不放會重復觸發此事件；keyup事件，當釋放鍵盤上的鍵時觸發。

　　用戶按下鍵盤上的字符鍵時，首先會觸發keydown事件，然後是keypress事件，最後觸發keyup事件。其中keydown和keypress是在文本框發生變化之前觸發，keyup是在文本框變化之後觸發。如果按下的是非字符集，則會觸發keydown和keyup事件。

　　在發生keydown和keyup事件時，event對象的keyCode屬性會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符集，keyCode的屬性值與ASCII碼中的小寫字母或數字的編碼相同。

1 EventUtil.addEvent(document.getElementById("inputtext"),"keyup",function(event){
2             event=EventUtil.getEvent(event);
3             console.log(event.keyCode);
4         })

• 復合事件　　

　　復合事件是DOM3級中新增加的一類事件，用於處理IME的輸入序列。IME可以讓用戶輸入在鍵盤上找不到的字符。IME通常需要同時多個字符來確定一個字符，比如中文的輸入。包括3個事件：compositionstart事件，IME打開時觸發，表示要輸入了；compositionupdate事件，插入新字符時觸發；compositionend事件，在IME復合系統關閉時觸發，返回正常輸入狀態。

 1 var textbox=document.getElementById("inputtext");
 2         EventUtil.addEvent(textbox,"compositionstart",function(event){
 3             event=EventUtil.getEvent(event);
 4             console.log(event.data);
 5         });
 6         EventUtil.addEvent(textbox,"compositionupdate",function(event){
 7             event=EventUtil.getEvent(event);
 8             console.log(event.data);
 9         });
10         EventUtil.addEvent(textbox,"compositionend",function(event){
11             event=EventUtil.getEvent(event);
12             console.log(event.data);
13         });

淺談JavaScript的事件（事件類型）