事件組成部分
觸發(fā)誰的事件：事件源
觸發(fā)什么事件：事件類型
觸發(fā)以后做什么：事件處理函數(shù)
varoDiv=document.querySelector('div')
oDiv.onclick=function() {}
// 誰來觸發(fā)事件 => oDiv => 這個(gè)事件的事件源就是 oDiv
// 觸發(fā)什么事件 => onclick => 這個(gè)事件類型就是 click
// 觸發(fā)之后做什么 => function () {} => 這個(gè)事件的處理函數(shù)
我們想要在點(diǎn)擊 div 以后做什么事情，就把我們要做的事情寫在事件處理函數(shù)里面
varoDiv=document.querySelector('div')
oDiv.onclick=function() {
console.log('你點(diǎn)擊了 div')
}
當(dāng)我們點(diǎn)擊 div 的時(shí)候，就會(huì)執(zhí)行事件處理函數(shù)內(nèi)部的代碼
每點(diǎn)擊一次，就會(huì)執(zhí)行一次事件處理函數(shù)
事件對(duì)象
什么是事件對(duì)象？
就是當(dāng)你觸發(fā)了一個(gè)事件以后，對(duì)該事件的一些描述信息
例如：
你觸發(fā)一個(gè)點(diǎn)擊事件的時(shí)候，你點(diǎn)在哪個(gè)位置了，坐標(biāo)是多少
你觸發(fā)一個(gè)鍵盤事件的時(shí)候，你按的是哪個(gè)按鈕
...
每一個(gè)事件都會(huì)有一個(gè)對(duì)應(yīng)的對(duì)象來描述這些信息，我們就把這個(gè)對(duì)象叫做 事件對(duì)象
瀏覽器給了我們一個(gè) 黑盒子，叫做 window.event，就是對(duì)事件信息的所有描述
比如點(diǎn)擊事件
你點(diǎn)在了 0，0 位置，那么你得到的這個(gè)事件對(duì)象里面對(duì)應(yīng)的就會(huì)有這個(gè)點(diǎn)位的屬性
你點(diǎn)在了 10, 10 位置，那么你得到的這個(gè)事件對(duì)象里面對(duì)應(yīng)的就會(huì)有這個(gè)點(diǎn)位的屬性
...
oDiv.onclick=function() {
console.log(window.event.X軸坐標(biāo)點(diǎn)信息)
console.log(window.event.Y軸坐標(biāo)點(diǎn)信息)
}
// 注冊(cè)點(diǎn)擊事件
oDiv.onclick=function(e) {
// 事件對(duì)象兼容寫法
e=e||window.event
console.log(e.offsetX)
console.log(e.offsetY)
?? }
</script>
</body>
相對(duì)于瀏覽器窗口你點(diǎn)擊的坐標(biāo)點(diǎn)
clientX 和 clientY
是相對(duì)于瀏覽器窗口來計(jì)算的，不管你頁面滾動(dòng)到什么情況，都是根據(jù)窗口來計(jì)算坐標(biāo)
<style>
? * {
margin:0;
padding:0;
? }
body{
width:2000px;
height:2000px;
? }
div{
width:300px;
height:300px;
padding:20px;
border:10pxsolid#333;
margin:20px0030px;
? }
</style>
<body>
<div></div>
<script>
varoDiv=document.querySelector('div')
// 注冊(cè)點(diǎn)擊事件
oDiv.onclick=function(e) {
r't? ?
e=e||window.event
console.log(e.clientX)
console.log(e.clientY)
?? }
</script>
</body>
相對(duì)于頁面你點(diǎn)擊的坐標(biāo)點(diǎn)
pageX 和 pageY
是相對(duì)于整個(gè)頁面的坐標(biāo)點(diǎn)，不管有沒有滾動(dòng)，都是相對(duì)于頁面拿到的坐標(biāo)點(diǎn)
<style>
? * {
margin:0;
padding:0;
? }
body{
width:2000px;
height:2000px;
? }
div{
width:300px;
height:300px;
padding:20px;
border:10pxsolid#333;
margin:20px0030px;
? }
</style>
<body>
<div></div>
<script>
varoDiv=document.querySelector('div')
// 注冊(cè)點(diǎn)擊事件
oDiv.onclick=function(e) {
// 事件對(duì)象兼容寫法
e=e||window.event
console.log(e.pageX)
console.log(e.pageY)
?? }
</script>
</body>
根據(jù)頁面左上角來說
margin-left 是 30
左邊框是 10
左右 padding 各是 20
內(nèi)容區(qū)域是 300
pageX : 300 + 20 + 20 + 10 + 30 = 380
margin-top 是 20
上邊框是 10
上下 padding 各是 20
內(nèi)容區(qū)域是 300
pageY : 300 + 20 + 20 + 10 + 20 = 270
點(diǎn)擊按鍵信息（了解）
我們的鼠標(biāo)一般都有兩個(gè)按鍵，一個(gè)左鍵一個(gè)右鍵
我們的事件對(duì)象里面也有這個(gè)信息，確定你點(diǎn)擊的是左鍵還是右鍵
我們使用 事件對(duì)象.button 來獲取信息
1 為鼠標(biāo)左鍵，2 為鼠標(biāo)右鍵
常見的事件（了解）
我們?cè)趯戫撁娴臅r(shí)候經(jīng)常用到的一些事件
大致分為幾類，瀏覽器事件 / 鼠標(biāo)事件 / 鍵盤事件 / 表單事件 / 觸摸事件
不需要都記住，但是大概要知道
瀏覽器事件
load ： 頁面全部資源加載完畢
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 ： 觸摸開始事件
touchend ： 觸摸結(jié)束事件
touchmove ： 觸摸移動(dòng)事件
注意：多用于移動(dòng)端布局
...
鍵盤事件
剛才了解了一下鼠標(biāo)事件，現(xiàn)在來聊聊鍵盤事件
我們?cè)阪I盤事件里面最主要的就是要做兩個(gè)事情
判斷點(diǎn)擊的是哪個(gè)按鍵
有沒有組合按鍵，shift + a / ctrl + b / ...
我們先要明確一個(gè)問題，就是是不是所有元素都可以綁定鍵盤事件
我們說事件有一個(gè)關(guān)鍵的東西是，該事件是由誰來觸發(fā)的
一個(gè) div 元素在頁面上，我怎么能讓一個(gè)鍵盤事件觸發(fā)在 div 上
所以說，我們一般只給能在頁面上選中的元素（表單元素） 和 document 來綁定鍵盤事件
document.onkeyup = function () { // code.. }
oInput.onkeyup = function () { // code.. }
確定按鍵
我們的鍵盤上每一個(gè)按鍵都有一個(gè)自己獨(dú)立的編碼
我們就是靠這個(gè)編碼來確定我們按下的是哪個(gè)按鍵的
我們通過 事件對(duì)象.keyCode 或者 事件對(duì)象.which 來獲取
為什么要有兩個(gè)呢，是因?yàn)?FireFox2.0 不支持 keycode 所以要用 which
document.keyup = function (e) {
? // 事件對(duì)象的兼容寫法
? e = e || window.event
? // 獲取鍵盤碼的兼容寫法
? var keyCode = e.keyCode || e.which
? console.log(keyCode)
}
常見的鍵盤碼（了解）
8： 刪除鍵（delete）
9： 制表符（tab）
13： 回車鍵（ebter）
16： 上檔鍵（shift）
17： ctrl 鍵
18： alt 鍵
27： 取消鍵（esc）
32： 空格鍵（space）
...
組合按鍵
組合案件最主要的就是 alt / shift / ctrl 三個(gè)按鍵
在我點(diǎn)擊某一個(gè)按鍵的時(shí)候判斷一下這三個(gè)鍵有沒有按下，有就是組合了，沒有就是沒有組合
事件對(duì)象里面也為我們提供了三個(gè)屬性
altKey ：alt 鍵按下得到 true，否則得到 false
shiftKey ：shift 鍵按下得到 true，否則得到 false
ctrlKey ：ctrl 鍵按下得到 true，否則得到 false
我們就可以通過這三個(gè)屬性來判斷是否按下了
document.onkeyup = function (e) {
? e = e || window.event
? keyCode = e.keyCode || e.which
? if (e.altKey && keyCode === 65) {
? ? console.log('你同時(shí)按下了 alt 和 a')
? }
}
事件的綁定方式
我們現(xiàn)在給一個(gè)注冊(cè)事件都是使用 onxxx 的方式
但是這個(gè)方式不是很好，只能給一個(gè)元素注冊(cè)一個(gè)事件
一旦寫了第二個(gè)事件，那么第一個(gè)就被覆蓋了
oDiv.onclick = function () {
? console.log('我是第一個(gè)事件')
}
oDiv.onclick = function () {
? console.log('我是第二個(gè)事件')
}
當(dāng)你點(diǎn)擊的時(shí)候，只會(huì)執(zhí)行第二個(gè)，第一個(gè)就沒有了
我們還有一種事件監(jiān)聽的方式去給元素綁定事件
使用 addEventListener 的方式添加
這個(gè)方法不兼容，在 IE 里面要使用 attachEvent
事件監(jiān)聽
addEventListener :? 非 IE 7 8 下使用
語法： 元素.addEventListener('事件類型'， 事件處理函數(shù)， 冒泡還是捕獲)
oDiv.addEventListener('click', function () {
? console.log('我是第一個(gè)事件')
}, false)
oDiv.addEventListener('click', function () {
? console.log('我是第二個(gè)事件')
}, false)
當(dāng)你點(diǎn)擊 div 的時(shí)候，兩個(gè)函數(shù)都會(huì)執(zhí)行，并且會(huì)按照你注冊(cè)的順序執(zhí)行
先打印 我是第一個(gè)事件 再打印 我是第二個(gè)事件
注意： 事件類型的時(shí)候不要寫 on，點(diǎn)擊事件就是 click，不是 onclick
attachEvent ：IE 7 8 下使用
語法： 元素.attachEvent('事件類型'， 事件處理函數(shù))
oDiv.attachEvent('onclick', function () {
? console.log('我是第一個(gè)事件')
})
oDiv.attachEvent('onclick', function () {
? console.log('我是第二個(gè)事件')
})
當(dāng)你點(diǎn)擊 div 的時(shí)候，兩個(gè)函數(shù)都會(huì)執(zhí)行，并且會(huì)按照你注冊(cè)的順序倒敘執(zhí)行
先打印 我是第二個(gè)事件 再打印 我是第一個(gè)事件
注意： 事件類型的時(shí)候要寫 on，點(diǎn)擊事件就行 onclick
兩個(gè)方式的區(qū)別
注冊(cè)事件的時(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 瀏覽器
