事件驅動
js控制頁面的行為是由事件驅動的。
什么是事件？（怎么發生的）
事件就是js偵測到用戶的操作或是頁面上的一些行為
事件源（發生在誰身上）
引發事件的元素
事件處理程序（發生了什么事）
對事件處理的程序或函數
事件對象（用來記錄發生事件時的相關信息）
只有在事件發生的時候，才會產生事件對象，無法手動創建，並且事件對象只能在處理函數內部訪問，處理函數允許 結束后該對象自動銷毀
事件對象的概念和作用
例子：老大說，你去幫我辦個事
你說，遵命。
老大說，給你配個對象兼秘書，叫event(伊文)，比較羞澀，用的時候，得叫她出來，平時需要隱藏起來
通過這個故事可以得知：
老大是瀏覽器
你是事件源；讓你做的事是事件處理程序；走着去 是點擊事件等
女秘書，就是事件對象，向你提供完成這件事的所有幫助
每做一件事，老大給配不同的秘書 / 每個事件都有不同的事件對象
1.事件有對象！叫事件對象(event)
2.事件對象是瀏覽器給的
3.事件對象不叫不出來
什么是event事件對象？
用來記錄一些事件發生時的相關信息的對象，每次事件發生的時候，會在函數或方法內部產生一個事件對象，這個事件對象就是event。
特征：
1.只有當事件發生的時候才會產生，只能在處理函數內部訪問
2.處理函數運行結束后自動銷毀
獲取方式（兼容問題）
怎么把貼身小秘書event叫出來呢？
如何獲取event事件？
事件對象需要作為參數傳入事件。
function fn(event){
console.log(event)
}
或者
function(){
console.log(arguments[0])
}
缺德定律再現！
IE中： window.event
正常瀏覽器中： 對象.on事件 = function(event){}
兼容方式：
function fn(eve){
var e = eve || window.event;
}
document.onclick = function(eve){
var e = eve || window.event;
console.log(e);
}
注意：event需要逐層傳遞，不要疏忽外部的function
在W3C標准中：事件可以寫在行內，但是因為結構和行為要分離，所以我們一半情況下用JS的方法來綁定事件，只有在極少數情況下，才將事件寫在行內。
行內事件又叫：HTML事件處理程序
事件的綁定方法：
瀏覽器中的節點(節點).on事件名 = function(){ 要干什么？(放在瀏覽器中，不執行，當事件發生的時候再執行) }
總結：事件就是給瀏覽器定義一個預處理函數，當事件觸發的時候，執行函數，這就是事件。
鼠標事件
/* onclick：點擊某個對象時觸發 ondblclick：雙擊某個對象時觸發 onmouseover：鼠標移入某個元素時觸發 onmouseout：鼠標移出某個元素時觸發 onmouseenter：鼠標進入某個元素時觸發 onmouseleave：鼠標離開某個元素時觸發 onmousedown：鼠標按下時觸發 onmouseup：鼠標抬起時觸發 onmousemove：鼠標被移動時觸發 onwheel：鼠標滾輪滾動時觸發 oncontextmenu：點擊鼠標右鍵時觸發 */
鼠標事件常用屬性介紹
老大給的美女對象event能用來做什么？
檢測按下的鼠標按鍵：event.button
返回值為0，左鍵；返回值為1，中鍵；返回值為2，右鍵
檢測相對於瀏覽器的位置：clientX和clientY
當鼠標事件發生時，鼠標相對於瀏覽器左上角的位置
檢測相對於文檔的位置：pageX和pageY
當鼠標事件發生時，鼠標相對於文檔左上角的位置。（IE7/8無）（類似於event.clientX和event.clientY）
檢測相對於屏幕的位置：screenX和screenY
當鼠標事件發生時，鼠標相對於屏幕左上角的位置
檢測相對於事件源的位置：offsetX和offsetY
當鼠標事件發生時，鼠標相對於事件發生元素左上角的位置
鍵盤事件
/* onkeydown：鍵盤的鍵按下時觸發 onkeyup：鍵盤的鍵放開時觸發 onkeypress：按下或按住鍵盤鍵時觸發 */
得知按下的鍵盤上的哪個鍵：keyCode
貼身女秘書還能做點啥？
event.keyCode 返回當前按鍵的ASCII碼
空格 32
回車 13
左 37
上 38
右 39
下 40
兼容問題： var eve = eve || window.event
var keyC = eve.keyCode || eve.which
案例：通過鍵盤上下左右，控制頁面中的元素位置移動
ctrlKey 判斷ctrl是否被按下，按下返回true
shiftKey 判斷shift是否被按下，按下返回true
altKey 判斷alt是否被按下，按下返回true
框架/對象事件
/* onresize：瀏覽器窗口大小改變時觸發 onabort：圖形的加載被中斷時觸發 onload：元素加載完時觸發 onerror：當加載文檔或者圖片時（沒找到）發生的錯誤時觸發 onscroll：文檔滾動時觸發 onpageshow：用戶訪問頁面時觸發 onunload：用戶退出頁面時觸發 */
表單事件
/* onfocus：元素獲得焦點時觸發 onblur：元素失去焦點時觸發 onchange：元素內容改變時觸發 oninput：元素獲取用戶輸入時觸發 onsubmit：提交按鈕時觸發 onreset：重置按鈕時觸發 onselect：文本被選中時觸發 */
拖動事件
/* ondrag：元素正在拖動時觸發 ondragend：用戶完成元素拖動時觸發 */
多媒體事件
/* onplay：在視頻/音頻開始播放時觸發 onended：在視頻/音頻播放結束時觸發 onpause：在視頻/音頻暫停時觸發 */