#JavaScript # javascript DOM0和DOM2事件

什麼是事件

事件是元素天生具有的行爲方式（和寫不寫JS代碼沒有關係），當咱們去操做元素的時候會觸發元素 的不少事件。

事件綁定

1.什麼是事件綁定
給當前元素的某一個事件綁定方法，目的是爲了讓當前元素某個事件被觸發時，能夠作一些事情。
2.事件綁定方法
給某一個元素綁定事件，目前經常使用的有兩種方式：
a)DOM0級事件綁定

oBox.onclick = function(){}

b)DOM2級事件綁定

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

PC端經常使用事件

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（也無論在哪裏獲取）他們存儲的基本信息應該是相同。

鼠標事件對象 MouseEvent 和 兼容處理

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

鍵盤事件對象 KeyboardEvent 和其兼容問題

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

code: 當前鍵盤的按鍵，例如按刪除鍵，code值是「Backspace」,IE6~8下不兼容。且IE6~8下沒有這個屬性。還有一個key屬性和code同樣，存儲的是按鍵的名字。一樣IE6~8下也沒有。
keyCode：存儲的是當前鍵盤按鍵的對應的碼值。大部分按鍵都有本身的碼值。兼容全部瀏覽器。

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

移動端手指事件 TouchEvent

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

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

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