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

UI事件

當(dāng)用戶與頁面上的元素交互時(shí)觸發(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錯(cuò)誤時(shí)（window）哈扮，當(dāng)無法加載圖像時(shí)（img）纬纪，當(dāng)無法加載嵌入內(nèi)容時(shí)（object），當(dāng)一或多個(gè)框架無法加載（框架集）滑肉。
  5.select包各，當(dāng)用戶選擇文本框（texterea或input）中的一個(gè)或多個(gè)字符時(shí)觸發(fā)。
  6.resize：當(dāng)窗口或框架的大小變化時(shí)（window或框架）
  7.scroll：當(dāng)用戶滾動(dòng)帶滾動(dòng)條的元素中的內(nèi)容時(shí)（在該元素上觸發(fā)）

焦點(diǎn)事件

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

• 種類
  blur：元素失去焦點(diǎn)，不會(huì)冒泡实檀；
  DOMFocusIn：同HTML事件focus惶洲，于DOM3遭廢棄，選用focusin膳犹；
  DOMFocusOut：同HTML事件blur恬吕，于DOM3遭廢棄，選用focusout须床；
  focus：元素獲得焦點(diǎn)铐料，不回冒泡；
  focusin：獲得焦點(diǎn)豺旬，與HTML事件focus等價(jià)钠惩，但會(huì)冒泡；
  focusout：失去焦點(diǎn)族阅，與HTML事件blur等價(jià)篓跛；
  -順序
  當(dāng)焦點(diǎn)從頁面中的一個(gè)元素轉(zhuǎn)移到另一個(gè)元素會(huì)觸發(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í)行操作時(shí)觸發(fā)；

• 事件種類
  1.mousedown:鼠標(biāo)按鈕被按下（左鍵或者右鍵）時(shí)觸發(fā)坦刀。不能通過鍵盤觸發(fā)愧沟。
  2.mouseup:鼠標(biāo)按鈕被釋放彈起時(shí)觸發(fā)。不能通過鍵盤觸發(fā)鲤遥。
  3.click:單擊鼠標(biāo)左鍵或者按下回車鍵時(shí)觸發(fā)沐寺。這點(diǎn)對(duì)確保易訪問性很重要，意味著onclick事件處理程序既可以通過鍵盤也可以通過鼠標(biāo)執(zhí)行盖奈。
  4.dblclick:雙擊鼠標(biāo)左鍵時(shí)觸發(fā)混坞。
  5.mouseover:鼠標(biāo)移入目標(biāo)元素上方。鼠標(biāo)移到其后代元素上時(shí)會(huì)觸發(fā)钢坦。
  6.mouseout:鼠標(biāo)移出目標(biāo)元素上方拔第。
  7.mouseenter:鼠標(biāo)移入元素范圍內(nèi)觸發(fā)咕村，該事件不冒泡，即鼠標(biāo)移到其后代元素上時(shí)不會(huì)觸發(fā)蚊俺。
  8.mouseleave:鼠標(biāo)移出元素范圍時(shí)觸發(fā)懈涛，該事件不冒泡，即鼠標(biāo)移到其后代元素時(shí)不會(huì)觸發(fā)泳猬。
  9.mousemove:鼠標(biāo)在元素內(nèi)部移到時(shí)不斷觸發(fā)批钠。不能通過鍵盤觸發(fā)。
• 事件觸發(fā)的順序
  mousedown => mouseup => click => mousedown => mouseup => click => dblclick
  mouseenter和mouseover的區(qū)別
  區(qū)別：
  mouseover事件會(huì)冒泡得封，這意味著埋心，鼠標(biāo)移到其后代元素上時(shí)會(huì)觸發(fā)。
  mouseenter事件不冒泡忙上，這意味著拷呆，鼠標(biāo)移到其后代元素上時(shí)不會(huì)觸發(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è)備）時(shí)觸發(fā)慷彤；

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

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

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

• 頁面坐標(biāo)位置
  通過clientX和clientY能夠指定鼠標(biāo)是在視口中聲明位置發(fā)生的，而頁面坐標(biāo)通過事件對(duì)象的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);

在頁面沒有滾動(dòng)的情況下须蜗，pageX和pageY的值與clientX和clientY的值相等。

IE8及更早版本不支持事件對(duì)象上的頁面坐標(biāo)，不過使用客戶區(qū)坐標(biāo)和滾動(dòng)信息可以計(jì)算出來明肮。這時(shí)候需要用到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ā)生時(shí)，不僅會(huì)有相對(duì)于瀏覽器窗口的位置柿估，還有一個(gè)相對(duì)于整個(gè)電腦屏幕的位置循未。而通過screenX和screenY屬性就可以確定鼠標(biāo)事件發(fā)生時(shí)鼠標(biāo)指針相對(duì)于整個(gè)屏幕的坐標(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)在文檔中輸入文本時(shí)觸發(fā)秫舌；

• 種類
  1.textInput：textInput是對(duì)keypress的補(bǔ)充的妖，用意是在將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會(huì)觸發(fā)textInput事件足陨。
• textInput詳細(xì)
  1.用戶在可編輯區(qū)域中輸入字符時(shí)嫂粟，就會(huì)觸發(fā)這個(gè)事件。
  2.textInput用來代替keypress墨缘，二者區(qū)別：
  （1）任何可以獲得焦點(diǎn)的元素都可以觸發(fā)keypress事件星虹，但只有可編輯區(qū)域才能觸發(fā)textInput事件。
  （2）textInput事件只會(huì)在用戶按下能夠輸入實(shí)際字符的鍵時(shí)才會(huì)觸發(fā)镊讼，而keypress事件則在按下那些能夠影響文本顯示的鍵時(shí)也會(huì)觸發(fā)（比如退格鍵）宽涌。
  3.data屬性
  textInput事件主要考慮的是字符，因此它的event對(duì)象中還包含一個(gè)data屬性狠毯，data值為用戶輸入的字符护糖。
  （1）用戶按下S鍵褥芒，data值就是“s”
  （2）用戶按下上檔鍵時(shí)按下S鍵嚼松，data值就是"S"
  4.inputMethod屬性
  另外，event對(duì)象上還有一個(gè)屬性锰扶，叫inputMethod献酗，表示文本輸入到文本框中的方式。使用這個(gè)屬性可以確定文本是如何輸入到控件中坷牛，從而驗(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í)行操作時(shí)觸發(fā)；
當(dāng)用戶按下一個(gè)鍵盤上的字符鍵時(shí)衡载，首先會(huì)觸發(fā)keydown事件搔耕，然后緊跟著是keypress事件，最后會(huì)觸發(fā)keyup事件月劈。
keydown和kepress都是在文本框發(fā)生變化之前觸發(fā)的度迂，keyup事件則是在文本框已經(jīng)發(fā)生變化之后觸發(fā)的。
如果用戶按下一個(gè)字符鍵不放猜揪，就會(huì)重復(fù)觸發(fā)keydown和keypress事件惭墓，直到用戶松開該鍵為止。
如果用戶按下的是一個(gè)非字符鍵而姐，那么首先會(huì)觸發(fā)keydown事件腊凶，然后就是keyup事件。如果按住這個(gè)非字符鍵不放拴念，那么就會(huì)一直重復(fù)觸發(fā)keydown事件钧萍，直到用戶松開這個(gè)鍵，此時(shí)會(huì)觸發(fā)keyup事件政鼠。

• 種類
  1.keydown：當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)风瘦，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件公般。
  2.keypress：當(dāng)用戶按下鍵盤上的字符鍵時(shí)觸發(fā)万搔，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件官帘。
  3.keyup：當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)瞬雹。
• 鍵碼
  keydown和keyup事件發(fā)生時(shí)，evnet對(duì)象的keyCode屬性中會(huì)包含一個(gè)代碼刽虹，與鍵盤上一個(gè)特定的鍵對(duì)應(yīng)酗捌。

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

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

• 字符編碼
  IE9哪廓，F(xiàn)irefox，Chrome和Safari的event對(duì)象支持charCode 屬性稍刀，charCode只有發(fā)生keypress事件時(shí)才包含值撩独，該值是按下那個(gè)鍵所代表字符的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級(jí)變化
  DOM3中鍵盤事件不再包含charCode橄登，而是包含2個(gè)新屬性：key和char。
  key是為了取代keyCode新增的讥此，它的值是一個(gè)字符串拢锹。按下字符鍵（比如"M")，key的值就是相應(yīng)的文本字符"M"萄喳；按下非字符鍵時(shí)卒稳，key的值就是相應(yīng)的鍵名（比如"Shift"或“Down”）。
  char屬性在按下字符鍵時(shí)行為與key相同他巨，但在按下非字符鍵時(shí)值為null充坑。
  存在兼容性，不推薦用染突。

觸摸事件

• 種類
  1.touchstart：當(dāng)手指觸摸屏幕時(shí)觸發(fā)捻爷；即使已經(jīng)有一個(gè)手指放在了屏幕上也會(huì)觸發(fā)。
  2.touchmove：當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)地觸發(fā)份企。在這個(gè)世界發(fā)生期間也榄，調(diào)用preventDefault()可以阻止?jié)L動(dòng)。
  3.touchend：當(dāng)手指在屏幕上移開時(shí)觸發(fā)司志。
  4.touchcancel：當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)甜紫。關(guān)于此事件的確切觸發(fā)時(shí)間，文檔中沒有明確說明俐芯。
  上面這幾個(gè)事件都會(huì)冒泡棵介，也都可以取消钉鸯。雖然這些觸摸事件沒有在DOM規(guī)范中定義吧史，但它們卻是以兼容DOM的方式實(shí)現(xiàn)的。因此唠雕，每個(gè)觸摸事件的event對(duì)象都提供了鼠標(biāo)事件中常見的屬性：bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrlKey和metaKey贸营。
• 屬性
  每個(gè)Touch對(duì)象包含下列屬性：
  clientX:觸摸目標(biāo)在視口中的x坐標(biāo)。
  clientY：觸摸目標(biāo)在視口中的y坐標(biāo)岩睁。
  identifier:標(biāo)識(shí)觸摸的唯一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屬性外阎毅，觸摸世界還包含下列三個(gè)用于跟蹤觸摸的屬性焚刚。
  touches:表示當(dāng)前跟蹤的觸摸操作的Touch對(duì)象的數(shù)組。
  targetTouches:特定于事件目標(biāo)的Touch對(duì)象的數(shù)組扇调。
  changedTouches:表示字上次觸摸以來發(fā)生了什么改變的Touch對(duì)象的數(shù)組矿咕。
  使用這些屬性可以跟蹤用戶對(duì)屏幕的觸摸操作。

function handlerTouchEvent(event){
    //只跟蹤一次觸摸
    if(event.touches.length==1 || event.touches.length==0){//書上這里有錯(cuò)
        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動(dòng)
                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事件的時(shí)候沒有問題，程序能正確的進(jìn)入 if 然后根據(jù)case執(zhí)行對(duì)應(yīng)的語句藐鹤，但是當(dāng)觸發(fā)touchend事件的時(shí)候，event.touches.length已經(jīng)等于0了赂韵，不能再進(jìn)入if 中娱节，也就不能執(zhí)行case中的語句，所以觸發(fā)touchend的時(shí)候永遠(yuǎn)不會(huì)執(zhí)行程序祭示。所以判斷條件要加上 event.touches.length==0./

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

手勢(shì)事件

當(dāng)兩個(gè)手指觸摸屏幕時(shí)就會(huì)產(chǎn)生手勢(shì)肄满，手勢(shì)通常會(huì)改變顯示項(xiàng)的大小，或者旋轉(zhuǎn)顯示項(xiàng)质涛。有三個(gè)手勢(shì)事件稠歉，

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

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動(dòng)
                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);