摘要：端的是點(diǎn)擊，但是移動(dòng)端把事件當(dāng)作單擊。移動(dòng)端的是點(diǎn)擊事件不是端的點(diǎn)擊效果，存在的延遲，項(xiàng)目中我們需要解決這個(gè)延遲，使用手指離開處理點(diǎn)擊事件。

事件是元素天生具備的行為方式（和寫不寫JS代碼沒有關(guān)系），當(dāng)我們?nèi)ゲ僮髟氐臅r(shí)候會(huì)觸發(fā)元素 的很多事件。

1.什么是事件綁定
給當(dāng)前元素的某一個(gè)事件綁定方法，目的是為了讓當(dāng)前元素某個(gè)事件被觸發(fā)時(shí)，可以做一些事情。
2.事件綁定方法
給某一個(gè)元素綁定事件，目前常用的有兩種方式：
a)DOM0級事件綁定

oBox.onclick = function(){}

b)DOM2級事件綁定

oBox.addEventListener("click",function(){},false) //標(biāo)準(zhǔn)瀏覽器  **不兼容IE6~8**
oBox.attachEvent("click",function(){})  //IE6~8中使用的DOM2綁定方式

1.表單元素常用事件
blur: 失去焦點(diǎn)事件
focus: 獲取焦點(diǎn)事件
change: 內(nèi)容發(fā)生變化事件
select: 被選中事件

2.鍵盤事件
keydown: 鍵盤按下的事件
keyup: 鍵盤抬起事件
keypress: 鍵盤按下后就有keypress（中文輸入法狀態(tài)下，會(huì)觸發(fā)keydown，因?yàn)闆]有把內(nèi)容出發(fā)到輸入框中）

3.鼠標(biāo)事件
click：點(diǎn)擊，不管是單擊還是雙擊都會(huì)觸發(fā)click事件
dbclick：雙擊。300MS之內(nèi)連續(xù)觸發(fā)2次點(diǎn)擊事件。
mouseover: 鼠標(biāo)滑過
mouseout ：鼠標(biāo)離開
mouseenter：鼠標(biāo)進(jìn)入
mouseleave：鼠標(biāo)離開
mousemove：鼠標(biāo)移動(dòng)
mousedown：鼠標(biāo)左鍵按下
mouseup: 鼠標(biāo)左鍵抬起
mousewheel: 鼠標(biāo)滾輪滾動(dòng)

4.其他事件
load：加載成功
error：加載失敗
scroll：滾輪滾動(dòng)事件
resize：大小改變事件 window.onresize當(dāng)瀏覽器窗口的大小發(fā)生改變觸發(fā)這個(gè)事件
beforeonload：關(guān)閉瀏覽器窗口之前觸發(fā)事件

移動(dòng)端的鍵盤一般都是虛擬鍵盤，雖然部分手機(jī)存在keydown/keyup事件但是兼容不好，所以我們想用鍵盤事件的時(shí)候，使用input事件代替

oBox.oninput= function(){}

移動(dòng)端沒有鼠標(biāo)，所以鼠標(biāo)類的事件在移動(dòng)端兼容都特別的差（mousexxx,這些事件不要在移動(dòng)端使用了）。

移動(dòng)端的大部分操作是靠手指完成的，移動(dòng)端有手指事件：
單手指事件：

touchstart:手指按下
touchmove:手指移動(dòng)
touchend:手指離開
touchcancel: 意外事件導(dǎo)致的手指離開（手機(jī)沒電等）

多手指事件：

gesturestart
gesturechange
gestureend

移動(dòng)端還有很多操作是基于手機(jī)硬件完成的，例如：手機(jī)傳感器、陀螺儀、重力感應(yīng)器等
在移動(dòng)端兼容click事件。pc端的click是點(diǎn)擊，但是移動(dòng)端把click事件當(dāng)作單擊。移動(dòng)端使用click事件處理點(diǎn)擊操作存在300MS延遲.

oBox.onclick = function(e){
//=>arguments[0] === e:當(dāng)方法執(zhí)行的時(shí)候，瀏覽器默認(rèn)傳遞給方法的參數(shù)值（事件對象）
}//事件綁定：給oBox的click事件，基于DOM0級事件綁定的方式，綁定了一個(gè)方法,以后當(dāng)我們手動(dòng)觸發(fā)oBox的click行為的時(shí)候，會(huì)把綁定的方法執(zhí)行。

當(dāng)元素的某一個(gè)事件行為被觸發(fā)，不僅會(huì)把之前綁定的方法執(zhí)行，而且還會(huì)給當(dāng)前綁定的方法傳遞一個(gè)值（瀏覽器默認(rèn)傳遞的），我們把傳遞的這個(gè)值稱為事件對象：
1.因?yàn)檫@個(gè)值是對象數(shù)據(jù)類型的值，里面存儲(chǔ)了很多的屬性和方法
2.這個(gè)對象中存儲(chǔ)的值都是當(dāng)前操作的一些基本信息，例如：鼠標(biāo)的位置、觸發(fā)的行為類型、觸發(fā)的事件源等
以上兩條都是針對標(biāo)準(zhǔn)瀏覽器IE6~8下不是這樣的機(jī)制。
IE6~8下方法被觸發(fā)執(zhí)行的時(shí)候，瀏覽器并沒有把事件對象當(dāng)作值傳遞給函數(shù)。e在IE6~8下是undefined。但是IE6~8下也有事件對象，事件對象需要我們通過window.event多帶帶獲取。

oBox.onclick = function(e){
    //以后想要獲取事件對象需要下面這樣寫，先驗(yàn)證是否傳遞e，沒有傳遞到window上去找即可
    e = e || window.event
    console.log(window.event)
}

事件對象是為了記錄當(dāng)前本次操作的基本信息的，所以只和本次操作有關(guān)。本次操作，頁面中不管通過什么方式獲取的e或者window.event（也不管在哪里獲?。┧麄兇鎯?chǔ)的基本信息應(yīng)該是相同。

clientX/clientY:當(dāng)前鼠標(biāo)觸發(fā)點(diǎn)距離當(dāng)前窗口左上角的X/Y軸的坐標(biāo)
pageX/pageY: 當(dāng)前鼠標(biāo)觸發(fā)點(diǎn)距離BODY左上角的X/Y軸坐標(biāo)（頁面第一屏左上角），但是IE6~8中沒有這兩個(gè)屬性。
type：當(dāng)前觸發(fā)事件類型
target：事件源，當(dāng)前鼠標(biāo)操作的是哪個(gè)元素，則事件源就是誰。IE6~8下沒有target屬性，它有srcElement這個(gè)屬性代表事件源。
preventDefault:此行為是為了阻止事件的默認(rèn)行為，IE6~8下沒有這個(gè)方法，需要使用e.returnValue = false來處理。
stopPropagation:此方法是為了阻止事件的冒泡傳播，IE6~8下不兼容，需要使用e.cancelBubble=true來處理

//IE6~8下處理pageX/pageY兼容
oBox.onclick = function(e){
    if(typeof e=== "undefined"){
        //IE6~8
        e = window.event;
        
        //pageX/pageY兼容 e.clientX+瀏覽器卷去的值
        e.pageX = e.clientX + (document.documentElement.scrollLeft||document.body.scrollLeft);
        e.pageY = e.clientY + (document.documentElement.scrollTop||document.body.scrollTop);
       
        //target兼容處理
        e.target = e.srcElement;
        
        //preventDefault兼容處理
        e.preventDefault = function(){
            e.returnValue = false
        }
        
        //stopPropagation兼容處理
        e.stopPropagation = function(){
            e.cancelBubble=true
        }
        
    }
   
    //下面在使用屬性和方法的時(shí)候，完全按照標(biāo)準(zhǔn)瀏覽器的語法實(shí)現(xiàn)即可（IE6~8下不兼容的屬性和方法已經(jīng)重寫了兼容處理）
}

上面的兼容處理方式屬于比較完整的，但是如果項(xiàng)目中我們只想用到某一個(gè)不兼容的屬性，我們沒必要寫這么多，簡單處理一下就可以了

oBox.onclick = function(e){
    e = e || window.event;
    e.target = e.target||e.srcElement;
    e.preventDefault?e.preventDefault():e.returnValue=false; 
}

inputId.onkeyup = function(e){
    console.dir(e);
}

code: 當(dāng)前鍵盤的按鍵，例如按刪除鍵，code值是“Backspace”,IE6~8下不兼容。且IE6~8下沒有這個(gè)屬性。還有一個(gè)key屬性和code一樣，存儲(chǔ)的是按鍵的名字。同樣IE6~8下也沒有。
keyCode：存儲(chǔ)的是當(dāng)前鍵盤按鍵的對應(yīng)的碼值。大部分按鍵都有自己的碼值。兼容所有瀏覽器。

which：和keycode一樣，對應(yīng)的也是鍵盤碼的值。 IE6~8下不兼容。

touches&changedTouches & targetTouches:存儲(chǔ)的是當(dāng)前屏幕上每一個(gè)手指操作的位置信息
touches:只有手指在屏幕上我們才可以獲取對應(yīng)的信息值
changedTouches:它可以記錄手指離開屏幕一瞬間所在的位置信息。
targetTouches:

移動(dòng)端的click是點(diǎn)擊事件（不是PC端的點(diǎn)擊效果），存在300MS的延遲，項(xiàng)目中我們需要解決這個(gè)延遲，使用touchstart touchmove touchend

oBox.ontouchend = function(){
//手指離開處理點(diǎn)擊事件。問題：長按和滑按等不屬于點(diǎn)擊事件，會(huì)被當(dāng)成點(diǎn)擊事件處理。
}
處理滑按操作