一、事件的概述
1、JavaScript 與 HTML 的交互是通過事件實現(xiàn)的扁位，事件代表文檔或瀏覽器窗口中某個有意義的時刻〕每。可以使用僅在事件發(fā)生時執(zhí)行的監(jiān)聽器（也叫處理程序）訂閱事件域仇。
2、事件意味著用戶或瀏覽器執(zhí)行的某種動作寺擂。比如暇务，單擊（click）、加載（load）怔软、鼠標懸停（mouseover）垦细。為響應事件而調(diào)用的函數(shù)被稱為事件處理程序（或事件監(jiān)聽器）。事件處理程序的名字以"on"開頭爽雄，因此 click 事件的處理程序叫作 onclick蝠检，而 load 事件的處理程序叫作 onload。
二挚瘟、事件的模式
JavaScript有兩種事件實現(xiàn)模式: 內(nèi)聯(lián)模式, 腳本模式叹谁。
1、內(nèi)聯(lián)模式
直接在HTML標簽中添加事件乘盖。這種模式是最傳統(tǒng)簡單的一種處理事件的方法焰檩。但是這種模式中事件和HTML是混寫的, 并沒有將JS與HTML分離, 當代碼量多了以后,對后期代碼維護和擴展很不利。
<input type="button" value="按鈕" onclick="alert('hello');" />
2订框、腳本模式
使用腳本模式我們需要先獲取到元素節(jié)點對象, 再針對該節(jié)點對象添加事件析苫。
var box = document.getElementById('box');
box.onclick = function() { //給box節(jié)點對象添加點擊事件onclick
console.log('Hello world!');
};
注意：內(nèi)聯(lián)里面調(diào)用的方法的this會指向window（傳遞this）腳本模式的this會指向當前的調(diào)用者。
三、事件的分類
1衩侥、鼠標事件
1.1 click事件
在用戶單擊鼠標主鍵（通常是左鍵）或按鍵盤回車鍵時觸發(fā)国旷。
注意：“鼠標單擊”定義為，用戶在同一個位置完成一次mousedown動作和mouseup動作茫死。它們的觸發(fā)順序是：mousedown首先觸 發(fā)跪但，mouseup接著觸發(fā)，click最后觸發(fā)峦萎。
1.2 dblclick事件
在用戶雙擊鼠標主鍵（通常是左鍵）時觸發(fā)屡久。
1.3 mousemove事件
在鼠標光標在元素上移動時反復觸發(fā)。
1.4 mouseover事件
在用戶把鼠標光標從元素外部移到元素內(nèi)部時觸發(fā)爱榔。
1.5 mouseout事件
在用戶把鼠標光標從一個元素移到另一個元素上時觸發(fā)被环。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素详幽。
1.6 mouseenter事件
在用戶把鼠標光標從元素外部移到元素內(nèi)部時觸發(fā)筛欢。不會在光標經(jīng)過后代元素時觸發(fā)。
1.7 mouseleave事件
在用戶把鼠標光標從元素內(nèi)部移到元素外部時觸發(fā)唇聘。也不會在光標經(jīng)過后代元素時觸發(fā)
1.8 mousedown事件
在用戶按下任意鼠標鍵時觸發(fā)悴能。
1.9 mouseup事件
在用戶釋放鼠標鍵時觸發(fā)。
1.10 contextmenu事件
contextmenu事件在一個節(jié)點上點擊鼠標右鍵時觸發(fā)雳灾，或者按下“上下文菜單”鍵時觸發(fā)。
document.oncontextmenu=function(){ return false; }
2冯凹、鍵盤事件
2.1 keydown事件
用戶按下鍵盤上某個鍵時觸發(fā)谎亩，而且持續(xù)按住會重復觸發(fā)。
2.2 keyup事件
用戶釋放鍵盤上某個鍵時觸發(fā)宇姚。
2.3 keypress事件
用戶按下鍵盤上某個鍵并產(chǎn)生字符時觸發(fā)匈庭，而且持續(xù)按住會重復觸發(fā)。Esc 鍵也會觸發(fā)這個事件浑劳。（非Ctrl阱持、Alt、Shift和Meta）
注意：keypress和textinput事件是在新輸入的文本真正插入到聚焦的文檔元素前觸發(fā)的魔熏。 如果用戶一直按鍵不松開衷咽，就會重復觸發(fā)keydown、keypress蒜绽，直到用戶松開才會觸發(fā)keyup镶骗。
3、HTML事件
3.1 load事件
在 window 對象上躲雅，load 事件會在整個頁面（包括所有外部資源如圖片鼎姊、JavaScript 文件和 CSS 文件）加載完成后觸發(fā)。
3.2 unload事件
unload 事件會在文檔卸載完成后觸發(fā)。unload 事件一般是在從一個頁面導航到另一個頁面時觸發(fā)相寇，最常用于清理引用慰于，以避免內(nèi)存泄漏。
3.3 close事件
當窗口關閉是觸發(fā)唤衫。
3.4 change事件
當 <input> 婆赠、 <select> 和 <textarea> 的值發(fā)生變化時都會觸發(fā)change事件。只有全部修改完成時它才會觸發(fā)战授。
具體分下面幾種情況：
- 激活單選框（radio）或復選框（checkbox）時觸發(fā)页藻。
- 用戶提交時觸發(fā)。比如植兰，從下列列表（select）完成選擇份帐，在日期或文件輸入框完成選擇。
- 當文本框或textarea元素的值發(fā)生改變楣导，并且喪失焦點時觸發(fā)
3.5 select事件
在文本框（<input>或 textarea）上當用戶選擇了一個或多個字符時觸發(fā)废境。
3.6 focus事件
當元素獲得焦點時觸發(fā)。
3.7 blur事件
當元素失去焦點時觸發(fā)筒繁。
3.8 reset事件
當表單重置（所有表單成員的值變回默認值）時觸發(fā)噩凹。
3.9 submit事件
當表單數(shù)據(jù)向服務器提交時觸發(fā)。
注意：submit事件的發(fā)生對象是form元素毡咏，而不是button元素（即使它的類型是submit）驮宴，因為提交的是表單，而不是按 鈕
3.10 scorll事件
當用戶滾動包含滾動條的元素時在元素上觸發(fā)呕缭。<body>元素包含已加載頁面的滾動條堵泽。大多數(shù) HTML 事件與 window 對象和表單控件有關。
