事件組成部分
觸發(fā)誰的事件：事件源
觸發(fā)什么事件：事件類型
觸發(fā)以后做什么：事件處理函數(shù)
varoDiv=document.querySelector('div')
oDiv.onclick=function() {}
// 誰來觸發(fā)事件 => oDiv => 這個事件的事件源就是 oDiv
// 觸發(fā)什么事件 => onclick => 這個事件類型就是 click
// 觸發(fā)之后做什么 => function () {} => 這個事件的處理函數(shù)
我們想要在點擊 div 以后做什么事情匕垫，就把我們要做的事情寫在事件處理函數(shù)里面
varoDiv=document.querySelector('div')
oDiv.onclick=function() {
console.log('你點擊了 div')
}
當(dāng)我們點擊 div 的時候徘熔，就會執(zhí)行事件處理函數(shù)內(nèi)部的代碼
每點擊一次嘁酿，就會執(zhí)行一次事件處理函數(shù)
事件對象
什么是事件對象尚猿？
就是當(dāng)你觸發(fā)了一個事件以后，對該事件的一些描述信息
例如：
你觸發(fā)一個點擊事件的時候，你點在哪個位置了，坐標是多少
你觸發(fā)一個鍵盤事件的時候爪瓜，你按的是哪個按鈕
...
每一個事件都會有一個對應(yīng)的對象來描述這些信息，我們就把這個對象叫做 事件對象
瀏覽器給了我們一個 黑盒子匙瘪，叫做 window.event铆铆，就是對事件信息的所有描述
比如點擊事件
你點在了 0，0 位置丹喻，那么你得到的這個事件對象里面對應(yīng)的就會有這個點位的屬性
你點在了 10, 10 位置薄货，那么你得到的這個事件對象里面對應(yīng)的就會有這個點位的屬性
...
oDiv.onclick=function() {
console.log(window.event.X軸坐標點信息)
console.log(window.event.Y軸坐標點信息)
}
// 注冊點擊事件
oDiv.onclick=function(e) {
// 事件對象兼容寫法
e=e||window.event
console.log(e.offsetX)
console.log(e.offsetY)
?? }
</script>
</body>
相對于瀏覽器窗口你點擊的坐標點
clientX 和 clientY
是相對于瀏覽器窗口來計算的，不管你頁面滾動到什么情況碍论，都是根據(jù)窗口來計算坐標
<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')
// 注冊點擊事件
oDiv.onclick=function(e) {
r't? ?
e=e||window.event
console.log(e.clientX)
console.log(e.clientY)
?? }
</script>
</body>
相對于頁面你點擊的坐標點
pageX 和 pageY
是相對于整個頁面的坐標點谅猾，不管有沒有滾動，都是相對于頁面拿到的坐標點
<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')
// 注冊點擊事件
oDiv.onclick=function(e) {
// 事件對象兼容寫法
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
點擊按鍵信息（了解）
我們的鼠標一般都有兩個按鍵，一個左鍵一個右鍵
我們的事件對象里面也有這個信息税娜，確定你點擊的是左鍵還是右鍵
我們使用 事件對象.button 來獲取信息
1 為鼠標左鍵坐搔，2 為鼠標右鍵
常見的事件（了解）
我們在寫頁面的時候經(jīng)常用到的一些事件
大致分為幾類，瀏覽器事件 / 鼠標事件 / 鍵盤事件 / 表單事件 / 觸摸事件
不需要都記住敬矩，但是大概要知道
瀏覽器事件
load ： 頁面全部資源加載完畢
scroll ： 瀏覽器滾動的時候觸發(fā)
...
鼠標事件
click ：點擊事件
dblclick ：雙擊事件
contextmenu ： 右鍵單擊事件
mousedown ：鼠標左鍵按下事件
mouseup ：鼠標左鍵抬起事件
mousemove ：鼠標移動
mouseover ：鼠標移入事件
mouseout ：鼠標移出事件
mouseenter ：鼠標移入事件
mouseleave ：鼠標移出事件
...
鍵盤事件
keyup ： 鍵盤抬起事件
keydown ： 鍵盤按下事件
keypress ： 鍵盤按下再抬起事件
...
表單事件
change : 表單內(nèi)容改變事件
input : 表單內(nèi)容輸入事件
submit : 表單提交事件
...
觸摸事件
touchstart ： 觸摸開始事件
touchend ： 觸摸結(jié)束事件
touchmove ： 觸摸移動事件
注意：多用于移動端布局
...
鍵盤事件
剛才了解了一下鼠標事件概行，現(xiàn)在來聊聊鍵盤事件
我們在鍵盤事件里面最主要的就是要做兩個事情
判斷點擊的是哪個按鍵
有沒有組合按鍵，shift + a / ctrl + b / ...
我們先要明確一個問題谤绳，就是是不是所有元素都可以綁定鍵盤事件
我們說事件有一個關(guān)鍵的東西是，該事件是由誰來觸發(fā)的
一個 div 元素在頁面上袒哥，我怎么能讓一個鍵盤事件觸發(fā)在 div 上
所以說缩筛，我們一般只給能在頁面上選中的元素（表單元素） 和 document 來綁定鍵盤事件
document.onkeyup = function () { // code.. }
oInput.onkeyup = function () { // code.. }
確定按鍵
我們的鍵盤上每一個按鍵都有一個自己獨立的編碼
我們就是靠這個編碼來確定我們按下的是哪個按鍵的
我們通過 事件對象.keyCode 或者 事件對象.which 來獲取
為什么要有兩個呢，是因為 FireFox2.0 不支持 keycode 所以要用 which
document.keyup = function (e) {
? // 事件對象的兼容寫法
? 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 三個按鍵
在我點擊某一個按鍵的時候判斷一下這三個鍵有沒有按下堡称，有就是組合了瞎抛，沒有就是沒有組合
事件對象里面也為我們提供了三個屬性
altKey ：alt 鍵按下得到 true，否則得到 false
shiftKey ：shift 鍵按下得到 true却紧，否則得到 false
ctrlKey ：ctrl 鍵按下得到 true桐臊，否則得到 false
我們就可以通過這三個屬性來判斷是否按下了
document.onkeyup = function (e) {
? e = e || window.event
? keyCode = e.keyCode || e.which
? if (e.altKey && keyCode === 65) {
? ? console.log('你同時按下了 alt 和 a')
? }
}
事件的綁定方式
我們現(xiàn)在給一個注冊事件都是使用 onxxx 的方式
但是這個方式不是很好，只能給一個元素注冊一個事件
一旦寫了第二個事件晓殊，那么第一個就被覆蓋了
oDiv.onclick = function () {
? console.log('我是第一個事件')
}
oDiv.onclick = function () {
? console.log('我是第二個事件')
}
當(dāng)你點擊的時候断凶，只會執(zhí)行第二個，第一個就沒有了
我們還有一種事件監(jiān)聽的方式去給元素綁定事件
使用 addEventListener 的方式添加
這個方法不兼容巫俺，在 IE 里面要使用 attachEvent
事件監(jiān)聽
addEventListener :? 非 IE 7 8 下使用
語法： 元素.addEventListener('事件類型'认烁， 事件處理函數(shù)， 冒泡還是捕獲)
oDiv.addEventListener('click', function () {
? console.log('我是第一個事件')
}, false)
oDiv.addEventListener('click', function () {
? console.log('我是第二個事件')
}, false)
當(dāng)你點擊 div 的時候介汹，兩個函數(shù)都會執(zhí)行却嗡，并且會按照你注冊的順序執(zhí)行
先打印 我是第一個事件 再打印 我是第二個事件
注意： 事件類型的時候不要寫 on，點擊事件就是 click嘹承，不是 onclick
attachEvent ：IE 7 8 下使用
語法： 元素.attachEvent('事件類型'窗价， 事件處理函數(shù))
oDiv.attachEvent('onclick', function () {
? console.log('我是第一個事件')
})
oDiv.attachEvent('onclick', function () {
? console.log('我是第二個事件')
})
當(dāng)你點擊 div 的時候，兩個函數(shù)都會執(zhí)行叹卷，并且會按照你注冊的順序倒敘執(zhí)行
先打印 我是第二個事件 再打印 我是第一個事件
注意： 事件類型的時候要寫 on撼港，點擊事件就行 onclick
兩個方式的區(qū)別
注冊事件的時候事件類型參數(shù)的書寫
addEventListener ： 不用寫 on
attachEvent ： 要寫 on
參數(shù)個數(shù)
addEventListener ： 一般是三個常用參數(shù)
attachEvent ： 兩個參數(shù)
執(zhí)行順序
addEventListener ： 順序注冊，順序執(zhí)行
attachEvent ： 順序注冊骤竹，倒敘執(zhí)行
適用瀏覽器
addEventListener ： 非 IE 7 8 的瀏覽器
attachEvent ： IE 7 8 瀏覽器
