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

標籤：圖片   卸載   blur   document   事件處理   檔案   開啟   sel   事件觸發   

　　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的事件（事件類型）