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

UI事件

當(dāng)用戶與頁面上的元素交互時觸發(fā)；

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

焦點(diǎn)事件

當(dāng)元素獲得或失去焦點(diǎn)時觸發(fā)；

• 種類
  blur：元素失去焦點(diǎn)，不會冒泡；
  DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin；
  DOMFocusOut：同HTML事件blur，于DOM3遭廢棄，選用focusout；
  focus：元素獲得焦點(diǎn)，不回冒泡；
  focusin：獲得焦點(diǎn)，與HTML事件focus等價，但會冒泡；
  focusout：失去焦點(diǎn)，與HTML事件blur等價；
  -順序
  當(dāng)焦點(diǎn)從頁面中的一個元素轉(zhuǎn)移到另一個元素會觸發(fā)下面的事件：
  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
}

鼠標(biāo)事件

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

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

mouseover

• 鼠標(biāo)左鍵和右鍵

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

• mouseover和mousemove的區(qū)別
  一般情況下mouseover即可，特殊情況才用mousemove，mousemove更耗資源，比如要監(jiān)控鼠標(biāo)坐標(biāo)的變化等。

滾輪事件

當(dāng)使用鼠標(biāo)滾輪（或類似設(shè)備）時觸發(fā)；

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

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

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

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

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

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

IE8及更早版本不支持事件對象上的頁面坐標(biāo)，不過使用客戶區(qū)坐標(biāo)和滾動信息可以計(jì)算出來。這時候需要用到document.body(混雜模式)或document.documentElement（標(biāo)準(zhǔn)模式）中的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>

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

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);

• 修改鍵

文本事件

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

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

鍵盤事件

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

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

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

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

• 字符編碼
  IE9，F(xiàn)irefox，Chrome和Safari的event對象支持charCode 屬性，charCode只有發(fā)生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()將其轉(zhuǎn)換成實(shí)際的字符。

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

觸摸事件

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

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(); //阻止?jié)L動
                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

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

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

手勢事件

當(dāng)兩個手指觸摸屏幕時就會產(chǎn)生手勢，手勢通常會改變顯示項(xiàng)的大小，或者旋轉(zhuǎn)顯示項(xiàng)。有三個手勢事件，

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

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(); //阻止?jié)L動
                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);