????????????????????????????????????????????EVENT
1井誉、什么是事件
一個(gè)事件由什么東西組成
觸發(fā)誰(shuí)的事件：事件源
觸發(fā)什么事件：事件類型
觸發(fā)以后做什么：事件處理函數(shù)
2嗓违、事件對(duì)象
每一個(gè)事件都會(huì)有一個(gè)對(duì)應(yīng)的對(duì)象來(lái)描述這些信息，我們就把這個(gè)對(duì)象叫做事件對(duì)象
瀏覽器給了我們一個(gè)黑盒子，叫做window.event，就是對(duì)事件信息的所有描述
這個(gè)玩意很好用，但是一般來(lái)說(shuō)刚操，好用的東西就會(huì)有兼容性問(wèn)題
在IE低版本里面這個(gè)東西好用，但是在高版本IE和Chrome里面不好使了
我們就得用另一種方式來(lái)獲取事件對(duì)象
在每一個(gè)事件處理函數(shù)的行參位置再芋，默認(rèn)第一個(gè)就是事件對(duì)象
兼容寫法：Div.onclick = function (e) {
? ? ? ? ? e = e || window.event
??????????console.log(e.X軸坐標(biāo)點(diǎn)信息)
??????????console.log(e.Y軸坐標(biāo)點(diǎn)信息)
}
3菊霜、點(diǎn)擊事件的光標(biāo)坐標(biāo)點(diǎn)獲取
offsetX和offsetY（相對(duì)于你點(diǎn)擊的元素來(lái)說(shuō)）
clientX和clientY（相對(duì)于瀏覽器窗口你點(diǎn)擊的坐標(biāo)點(diǎn)）
pageX和pageY（相對(duì)于頁(yè)面你點(diǎn)擊的坐標(biāo)點(diǎn)）
4、點(diǎn)擊按鍵信息（了解）
我們使用事件對(duì)象.button來(lái)獲取信息
0為鼠標(biāo)左鍵济赎，1為滾輪鉴逞，2為鼠標(biāo)右鍵
5记某、常見(jiàn)的事件（了解）
大致分為幾類，瀏覽器事件/ 鼠標(biāo)事件 / 鍵盤事件 / 表單事件 / 觸摸事件
瀏覽器事件
load：頁(yè)面全部資源加載完畢
scroll：瀏覽器滾動(dòng)的時(shí)候觸發(fā)
鼠標(biāo)事件
click：點(diǎn)擊事件
dblclick：雙擊事件
contextmenu：右鍵單擊事件
mousedown：鼠標(biāo)左鍵按下事件
mouseup：鼠標(biāo)左鍵抬起事件
mousemove：鼠標(biāo)移動(dòng)
mouseover：鼠標(biāo)移入事件
mouseout：鼠標(biāo)移出事件
mouseenter：鼠標(biāo)移入事件
mouseleave：鼠標(biāo)移出事件
...
鍵盤事件
keyup：鍵盤抬起事件
keydown：鍵盤按下事件
keypress：鍵盤按下再抬起事件
...
表單事件
change?: 表單內(nèi)容改變事件
input?: 表單內(nèi)容輸入事件
submit?: 表單提交事件
...
觸摸事件
touchstart：觸摸開(kāi)始事件
touchend：觸摸結(jié)束事件
touchmove：觸摸移動(dòng)事件
...
6构捡、鍵盤事件
我們?cè)阪I盤事件里面最主要的就是要做兩個(gè)事情
判斷點(diǎn)擊的是哪個(gè)按鍵
有沒(méi)有組合按鍵液南，shift + a / ctrl + b / ...
確定按鍵
我們的鍵盤上每一個(gè)按鍵都有一個(gè)自己獨(dú)立的編碼
我們就是靠這個(gè)編碼來(lái)確定我們按下的是哪個(gè)按鍵的
我們通過(guò)事件對(duì)象.keyCode或者事件對(duì)象.which來(lái)獲取
為什么要有兩個(gè)呢，是因?yàn)镕ireFox2.0 不支持keycode所以要用which
常見(jiàn)的鍵盤碼（了解）
8： 刪除鍵（delete）
9： 制表符（tab）
13： 回車鍵（enter）
16： 上檔鍵（shift）
17： ctrl 鍵
18： alt 鍵
27： 取消鍵（esc）
32： 空格鍵（space）
...
組合按鍵
組合案件最主要的就是alt?/ shift?/ ctrl三個(gè)按鍵
在我點(diǎn)擊某一個(gè)按鍵的時(shí)候判斷一下這三個(gè)鍵有沒(méi)有按下勾徽，有就是組合了滑凉，沒(méi)有就是沒(méi)有組合
事件對(duì)象里面也為我們提供了三個(gè)屬性：
altKey：alt 鍵按下得到 true，否則得到 false
shiftKey：shift 鍵按下得到 true喘帚，否則得到 false
ctrlKey：ctrl 鍵按下得到 true畅姊，否則得到 false
我們就可以通過(guò)這三個(gè)屬性來(lái)判斷是否按下了
事件的綁定方式
我們現(xiàn)在給一個(gè)注冊(cè)事件都是使用onxxx的方式
但是這個(gè)方式不是很好，只能給一個(gè)元素注冊(cè)一個(gè)事件
一旦寫了第二個(gè)事件吹由，那么第一個(gè)就被覆蓋了
當(dāng)你點(diǎn)擊的時(shí)候若未，只會(huì)執(zhí)行第二個(gè)，第一個(gè)就沒(méi)有了
我們還有一種事件監(jiān)聽(tīng)的方式去給元素綁定事件
使用addEventListener的方式添加
這個(gè)方法不兼容倾鲫，在IE 里面要使用attachEvent
事件監(jiān)聽(tīng)
addEventListener?: 非 IE 7 8 下使用
語(yǔ)法：元素.addEventListener('事件類型'粗合， 事件處理函數(shù)， 冒泡還是捕獲)
注意：事件類型的時(shí)候不要寫on乌昔，點(diǎn)擊事件就是 click舌劳，不是 onclick
attachEvent：IE 7 8 下使用
語(yǔ)法：元素.attachEvent('事件類型'， 事件處理函數(shù))
注意：事件類型的時(shí)候要寫on玫荣，點(diǎn)擊事件就行 onclick
兩個(gè)方式的區(qū)別
注冊(cè)事件的時(shí)候事件類型參數(shù)的書(shū)寫：
addEventListener：不用寫on
attachEvent：要寫on
參數(shù)個(gè)數(shù)：
addEventListener：一般是三個(gè)常用參數(shù)
attachEvent：兩個(gè)參數(shù)
執(zhí)行順序：
addEventListener：順序注冊(cè)，順序執(zhí)行
attachEvent：順序注冊(cè)大诸，倒敘執(zhí)行
適用瀏覽器：
addEventListener：非IE 7 8 的瀏覽器
attachEvent：IE 7 8 瀏覽器
