Web 瀏覽器中可能發生的事件有很多類型。如前所述，不同的事件類型具有不同的信息，而 DOM3 級事件規定了以下幾類事件。

UI事件

當用戶與頁面上的元素交互時觸發；

• 種類
  1.load，頁面完全加載完后在window上觸發，所有框架加載完畢后在框架集上觸發，圖像加載完畢在img元素上觸發，當嵌入內容加載完畢在object元素上觸發。
  2.unload，頁面完全卸載（window），所有框架都卸載后（框架集），嵌入內容卸載完畢后（object）。
  3.abort，當用戶停止下載過程，如果嵌入內容沒有加載完，則在object元素上除法。
  4.error，當js錯誤時（window），當無法加載圖像時（img），當無法加載嵌入內容時（object），當一或多個框架無法加載（框架集）。
  5.select，當用戶選擇文本框（texterea或input）中的一個或多個字符時觸發。
  6.resize：當窗口或框架的大小變化時（window或框架）
  7.scroll：當用戶滾動帶滾動條的元素中的內容時（在該元素上觸發）

焦點事件

當元素獲得或失去焦點時觸發；

• 種類
  blur：元素失去焦點，不會冒泡；
  DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin；
  DOMFocusOut：同HTML事件blur，于DOM3遭廢棄，選用focusout；
  focus：元素獲得焦點，不回冒泡；
  focusin：獲得焦點，與HTML事件focus等價，但會冒泡；
  focusout：失去焦點，與HTML事件blur等價；
  -順序
  當焦點從頁面中的一個元素轉移到另一個元素會觸發下面的事件：
  focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

window.onfocus = function () {
  console.log('focus'); //focus
  console.log(document.hasFocus()); //True
}
window.onblur = function () {
  console.log('blur'); //blur
  console.log(document.hasFocus()); //False
}

鼠標事件

當用戶通過鼠標在頁面上執行操作時觸發；

• 事件種類
  1.mousedown:鼠標按鈕被按下（左鍵或者右鍵）時觸發。不能通過鍵盤觸發。
  2.mouseup:鼠標按鈕被釋放彈起時觸發。不能通過鍵盤觸發。
  3.click:單擊鼠標左鍵或者按下回車鍵時觸發。這點對確保易訪問性很重要，意味著onclick事件處理程序既可以通過鍵盤也可以通過鼠標執行。
  4.dblclick:雙擊鼠標左鍵時觸發。
  5.mouseover:鼠標移入目標元素上方。鼠標移到其后代元素上時會觸發。
  6.mouseout:鼠標移出目標元素上方。
  7.mouseenter:鼠標移入元素范圍內觸發，該事件不冒泡，即鼠標移到其后代元素上時不會觸發。
  8.mouseleave:鼠標移出元素范圍時觸發，該事件不冒泡，即鼠標移到其后代元素時不會觸發。
  9.mousemove:鼠標在元素內部移到時不斷觸發。不能通過鍵盤觸發。
• 事件觸發的順序
  mousedown => mouseup => click => mousedown => mouseup => click => dblclick
  mouseenter和mouseover的區別
  區別：
  mouseover事件會冒泡，這意味著，鼠標移到其后代元素上時會觸發。
  mouseenter事件不冒泡，這意味著，鼠標移到其后代元素上時不會觸發。
  
  ![mouseenter]

mouseover

• 鼠標左鍵和右鍵

<script type="text/javascript">
document.onmousedown=function (ev)
{
    var oEvent=ev||event; //IE瀏覽器直接使用event或者window.event得到事件本身。
    alert(oEvent.button);// IE下鼠標的 左鍵是1 ，  右鍵是2   ff和chrome下 鼠標左鍵是0  右鍵是2
};
</script>

• mouseover和mousemove的區別
  一般情況下mouseover即可，特殊情況才用mousemove，mousemove更耗資源，比如要監控鼠標坐標的變化等。

滾輪事件

當使用鼠標滾輪（或類似設備）時觸發；

• 事件種類
  1.mousewheel：這個事件跟蹤鼠標滾輪，類似Mac的觸屏版。
• 客戶區坐標位置
  鼠標事件都是在瀏覽器視口的特定位置上發生的。這個位置信息保存在事件對象的clientX和clientY屬性中。所有瀏覽器都支持者兩個屬性。clientX和clientY表示事件發生時鼠標指針在視口中的水平和垂直坐標。

document.addEventListener('click',function(event){
    document.title=event.clientX+' , '+event.clientY;
},false);

給document指定了onclick事件處理程序，單擊頁面時在title中可以看到客戶端的坐標信息。
注意：這些值中不包括頁面滾動的距離，因為這個位置并不表示鼠標在頁面上的位置。

• 頁面坐標位置
  通過clientX和clientY能夠指定鼠標是在視口中聲明位置發生的，而頁面坐標通過事件對象的pageX和pageY屬性，能夠得到事件是在頁面中的什么位置發生的。即pageX和pageY表示鼠標光標在頁面中的位置，因此坐標是從頁面本身而非視口的左邊和頂邊計算的。

document.addEventListener('click',function(event){
    console.log(event.clientX+' , '+event.clientY);
    console.log(event.pageX+' , '+event.pageY);
},false);

在頁面沒有滾動的情況下，pageX和pageY的值與clientX和clientY的值相等。

IE8及更早版本不支持事件對象上的頁面坐標，不過使用客戶區坐標和滾動信息可以計算出來。這時候需要用到document.body(混雜模式)或document.documentElement（標準模式）中的scrollLeft和scrollTop屬性。如下：

<script type="text/javascript">
var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
    event=EventUtil.getEvent(event);
    var pageX=event.pageX,
          pageY=event.pageY;
    if(pageX==undefined)          {
        pageX=event.clientX+(document.body.scrollLeft || document.documentElement.scrollLeft);
    }
    if(pageY==undefined){
        pageY=event.clientY+(document.body.scrollTop || document.documentElement.scrollTop);
    }
    alert("Page coordinates:" +pageX+" , "+pageY);
});
</script>

• 屏幕坐標位置
  鼠標事件發生時，不僅會有相對于瀏覽器窗口的位置，還有一個相對于整個電腦屏幕的位置。而通過screenX和screenY屬性就可以確定鼠標事件發生時鼠標指針相對于整個屏幕的坐標信息。

document.addEventListener('click',function(event){
    console.log("Client coordinates"+event.clientX+' , '+event.clientY);
    console.log("Page coordinates "+event.pageX+' , '+event.pageY);
    console.log("Screen coordinates "+event.screenX+' , '+event.screenY);
},false);

• 修改鍵

文本事件

當在文檔中輸入文本時觸發；

• 種類
  1.textInput：textInput是對keypress的補充，用意是在將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會觸發textInput事件。
• textInput詳細
  1.用戶在可編輯區域中輸入字符時，就會觸發這個事件。
  2.textInput用來代替keypress，二者區別：
  （1）任何可以獲得焦點的元素都可以觸發keypress事件，但只有可編輯區域才能觸發textInput事件。
  （2）textInput事件只會在用戶按下能夠輸入實際字符的鍵時才會觸發，而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發（比如退格鍵）。
  3.data屬性
  textInput事件主要考慮的是字符，因此它的event對象中還包含一個data屬性，data值為用戶輸入的字符。
  （1）用戶按下S鍵，data值就是“s”
  （2）用戶按下上檔鍵時按下S鍵，data值就是"S"
  4.inputMethod屬性
  另外，event對象上還有一個屬性，叫inputMethod，表示文本輸入到文本框中的方式。使用這個屬性可以確定文本是如何輸入到控件中，從而驗證其有效性。
  0，表示瀏覽器不確定是怎么輸入的
  1，表示是使用鍵盤輸入的
  2，表示文本是粘貼進來的
  3，表示文本是拖放進來的
  4，表示文本是使用IME輸入的
  5，表示文本是通過在表單中選擇某一項輸入的
  6，表示文本是通過手寫輸入的（比如使用手寫筆）
  7，表示文本是通過語音輸入的
  8，表示文本是通過集中方法組合輸入的
  9，表示文本是通過腳本輸入的
  兼容性：支持textInput屬性的瀏覽器有IE9+，Safari和Chrome，只有IE支持inputMethod屬性。

鍵盤事件

當用戶通過鍵盤在頁面上執行操作時觸發；
當用戶按下一個鍵盤上的字符鍵時，首先會觸發keydown事件，然后緊跟著是keypress事件，最后會觸發keyup事件。
keydown和kepress都是在文本框發生變化之前觸發的，keyup事件則是在文本框已經發生變化之后觸發的。
如果用戶按下一個字符鍵不放，就會重復觸發keydown和keypress事件，直到用戶松開該鍵為止。
如果用戶按下的是一個非字符鍵，那么首先會觸發keydown事件，然后就是keyup事件。如果按住這個非字符鍵不放，那么就會一直重復觸發keydown事件，直到用戶松開這個鍵，此時會觸發keyup事件。

• 種類
  1.keydown：當用戶按下鍵盤上的任意鍵時觸發，而且如果按住不放的話，會重復觸發此事件。
  2.keypress：當用戶按下鍵盤上的字符鍵時觸發，而且如果按住不放的話，會重復觸發此事件。
  3.keyup：當用戶釋放鍵盤上的鍵時觸發。
• 鍵碼
  keydown和keyup事件發生時，evnet對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。

var textbox=document.getElementById("myText");
EventUtil.addHandler(textbox,"keyup",function(event){
    event=EventUtil.getEvent(event);
    console.log(event.keyCode);
}); 

兼容性：在Firefox和Opera中，按分號鍵時keyCode值為59，也就是ASCII中分號的編碼；但IE和Safari返回186，即鍵盤中按鍵的鍵碼。
鍵碼表：http://www.cnblogs.com/wuhua1/p/6686237.html

• 字符編碼
  IE9，Firefox，Chrome和Safari的event對象支持charCode 屬性，charCode只有發生keypress事件時才包含值，該值是按下那個鍵所代表字符的ASCII編碼。
  兼容性：
  IE8及之前版本中Opera是在keyCode中保存字符的ASCII編碼。
  檢查charCode屬性是否可用，不可用則使用keyCode。

getCharCode:function(event){
    if(typeof event.charCode=="number"){//在不支持的瀏覽器中值是undefined
        return event.charCode;
    }else{
        return event.keyCode;
    }
}

在取得了字符編碼之后，就可以使用String.fromCharCode()將其轉換成實際的字符。

• DOM3級變化
  DOM3中鍵盤事件不再包含charCode，而是包含2個新屬性：key和char。
  key是為了取代keyCode新增的，它的值是一個字符串。按下字符鍵（比如"M")，key的值就是相應的文本字符"M"；按下非字符鍵時，key的值就是相應的鍵名（比如"Shift"或“Down”）。
  char屬性在按下字符鍵時行為與key相同，但在按下非字符鍵時值為null。
  存在兼容性，不推薦用。

觸摸事件

• 種類
  1.touchstart：當手指觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發。
  2.touchmove：當手指在屏幕上滑動時連續地觸發。在這個世界發生期間，調用preventDefault()可以阻止滾動。
  3.touchend：當手指在屏幕上移開時觸發。
  4.touchcancel：當系統停止跟蹤觸摸時觸發。關于此事件的確切觸發時間，文檔中沒有明確說明。
  上面這幾個事件都會冒泡，也都可以取消。雖然這些觸摸事件沒有在DOM規范中定義，但它們卻是以兼容DOM的方式實現的。因此，每個觸摸事件的event對象都提供了鼠標事件中常見的屬性：bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrlKey和metaKey。
• 屬性
  每個Touch對象包含下列屬性：
  clientX:觸摸目標在視口中的x坐標。
  clientY：觸摸目標在視口中的y坐標。
  identifier:標識觸摸的唯一ID。
  pageX：觸摸目標在頁面中的x坐標。
  pageY：觸摸目標在頁面中的y坐標。
  screenX：觸摸目標在屏幕中的x坐標。
  screenY：觸摸目標在屏幕中的y坐標。
  target：觸摸的DOM節點目標。
  除了常見的DOM屬性外，觸摸世界還包含下列三個用于跟蹤觸摸的屬性。
  touches:表示當前跟蹤的觸摸操作的Touch對象的數組。
  targetTouches:特定于事件目標的Touch對象的數組。
  changedTouches:表示字上次觸摸以來發生了什么改變的Touch對象的數組。
  使用這些屬性可以跟蹤用戶對屏幕的觸摸操作。

function handlerTouchEvent(event){
    //只跟蹤一次觸摸
    if(event.touches.length==1 || event.touches.length==0){//書上這里有錯
        var output=document.getElementById("output");
        switch(event.type){
            case "touchstart":
                output.innerHTML="Touch started ( "+event.touches[0].clientX+", "+event.touches[0].clientY+")";
                break;
            case "touchend":
                output.innerHTML+="<br/>Touch ended ("+event.changedTouches[0].clientX+", "+event.changedTouches[0].clientY+")";
                break;
            case "touchmove":
                event.preventDefault(); //阻止滾動
                output.innerHTML+="<br/>Touch moved ("+event.changedTouches[0].clientX+", "+event.changedTouches[0].clientY+")";
        }
    }
}

EventUtil.addHandler(document,"touchstart",handlerTouchEvent);
EventUtil.addHandler(document,"touchend",handlerTouchEvent);
EventUtil.addHandler(document,"touchmove",handlerTouchEvent);

315302-20170317110948354-1520843247.png

/當觸發touchstart和touchmove事件的時候沒有問題，程序能正確的進入 if 然后根據case執行對應的語句，但是當觸發touchend事件的時候，event.touches.length已經等于0了，不能再進入if 中，也就不能執行case中的語句，所以觸發touchend的時候永遠不會執行程序。所以判斷條件要加上 event.touches.length==0./

• 觸發順序
  touchstart => mouseover => mousemove（一次） => mousedown => mouseup => click => touched

手勢事件

當兩個手指觸摸屏幕時就會產生手勢，手勢通常會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件，

• 種類
  1.gesturestart:當一個手指已經按在屏幕上而另一個手指又觸摸屏幕時觸發。
  2.gesturechange:當觸摸屏幕的任何一個手指的位置發生變化時觸發。
  3.gestureend:當任何一個手指從屏幕上移開時觸發。
• 觸摸事件和手勢事件關系
  每個手勢事件的event對象都包含著標準的鼠標事件屬性：bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrlKey和metaKey。此外還有兩個額外的屬性：rotation和scale。
  1.rotation屬性：表示手指變化引起的旋轉角度，負值表示逆時針旋轉，正值表示順時針旋轉（該值從0開始）。
  2.scale屬性：表示兩個手指間距離的變化情況（例如向內收縮會縮短距離）；這個值從1開始，并隨距離拉大而增長，隨距離縮短而減小。
  注：
  （1）只有兩個手指都觸摸到事件的接收容器時才會觸發這些事件。
  （2）在一個元素上設置事件處理程序，意味著兩個手指必須同時位于該元素的范圍之內，才能觸發手勢事件（這個元素就是目標）。
  （3）由于這些事件冒泡，所以講事件處理程序放在文檔上也可以處理所有手勢事件。
  （4）此時，事件的目標就算兩個手指都位于其范圍內的那個元素。
  例子：

function handleGestureEvent(event){
   var output=document.getElementById("output");
    switch(event.type){
         case "gesturestart":
                output.innerHTML="Gesture started ( "+event.ratation+", scale"+event.scale+")";
                break;
            case "gestureend":
                output.innerHTML+="<br/>Gesture ended ("+event.rotation+", scale"+event.scale+")";
                break;
            case "gesturechange":
                event.preventDefault(); //阻止滾動
                output.innerHTML+="<br/>Gesture changed ("+event.rotation+",scale "+event.scale+")";
    }
}
EventUtil.addHandler(document,"gesturestart",handleGestureEvent);
EventUtil.addHandler(document,"gestureend",handleGestureEvent);
EventUtil.addHandler(document,"gesturechange",handleGestureEvent);