摘要：端的是點擊，但是移動端把事件當作單擊。移動端的是點擊事件不是端的點擊效果，存在的延遲，項目中我們需要解決這個延遲，使用手指離開處理點擊事件。

事件是元素天生具備的行為方式（和寫不寫JS代碼沒有關系），當我們去操作元素的時候會觸發元素 的很多事件。

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

oBox.onclick = function(){}

b)DOM2級事件綁定

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

1.表單元素常用事件
blur: 失去焦點事件
focus: 獲取焦點事件
change: 內容發生變化事件
select: 被選中事件

2.鍵盤事件
keydown: 鍵盤按下的事件
keyup: 鍵盤抬起事件
keypress: 鍵盤按下后就有keypress（中文輸入法狀態下，會觸發keydown，因為沒有把內容出發到輸入框中）

3.鼠標事件
click：點擊，不管是單擊還是雙擊都會觸發click事件
dbclick：雙擊。300MS之內連續觸發2次點擊事件。
mouseover: 鼠標滑過
mouseout ：鼠標離開
mouseenter：鼠標進入
mouseleave：鼠標離開
mousemove：鼠標移動
mousedown：鼠標左鍵按下
mouseup: 鼠標左鍵抬起
mousewheel: 鼠標滾輪滾動

4.其他事件
load：加載成功
error：加載失敗
scroll：滾輪滾動事件
resize：大小改變事件 window.onresize當瀏覽器窗口的大小發生改變觸發這個事件
beforeonload：關閉瀏覽器窗口之前觸發事件

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

oBox.oninput= function(){}

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

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

touchstart:手指按下
touchmove:手指移動
touchend:手指離開
touchcancel: 意外事件導致的手指離開（手機沒電等）

多手指事件：

gesturestart
gesturechange
gestureend

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

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

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

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

事件對象是為了記錄當前本次操作的基本信息的，所以只和本次操作有關。本次操作，頁面中不管通過什么方式獲取的e或者window.event（也不管在哪里獲取）他們存儲的基本信息應該是相同。

clientX/clientY:當前鼠標觸發點距離當前窗口左上角的X/Y軸的坐標
pageX/pageY: 當前鼠標觸發點距離BODY左上角的X/Y軸坐標（頁面第一屏左上角），但是IE6~8中沒有這兩個屬性。
type：當前觸發事件類型
target：事件源，當前鼠標操作的是哪個元素，則事件源就是誰。IE6~8下沒有target屬性，它有srcElement這個屬性代表事件源。
preventDefault:此行為是為了阻止事件的默認行為，IE6~8下沒有這個方法，需要使用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
        }
        
    }
   
    //下面在使用屬性和方法的時候，完全按照標準瀏覽器的語法實現即可（IE6~8下不兼容的屬性和方法已經重寫了兼容處理）
}

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

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: 當前鍵盤的按鍵，例如按刪除鍵，code值是“Backspace”,IE6~8下不兼容。且IE6~8下沒有這個屬性。還有一個key屬性和code一樣，存儲的是按鍵的名字。同樣IE6~8下也沒有。
keyCode：存儲的是當前鍵盤按鍵的對應的碼值。大部分按鍵都有自己的碼值。兼容所有瀏覽器。

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

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

移動端的click是點擊事件（不是PC端的點擊效果），存在300MS的延遲，項目中我們需要解決這個延遲，使用touchstart touchmove touchend

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