一、事件的概述
1、JavaScript 與 HTML 的交互是通過(guò)事件實(shí)現(xiàn)的，事件代表文檔或?yàn)g覽器窗口中某個(gè)有意義的時(shí)刻?？梢允褂脙H在事件發(fā)生時(shí)執(zhí)行的監(jiān)聽(tīng)器（也叫處理程序）訂閱事件。
2、事件意味著用戶或?yàn)g覽器執(zhí)行的某種動(dòng)作。比如，單擊（click）、加載（load）、鼠標(biāo)懸停（mouseover）。為響應(yīng)事件而調(diào)用的函數(shù)被稱為事件處理程序（或事件監(jiān)聽(tīng)器）。事件處理程序的名字以"on"開(kāi)頭，因此 click 事件的處理程序叫作 onclick，而 load 事件的處理程序叫作 onload。
二、事件的模式
JavaScript有兩種事件實(shí)現(xiàn)模式: 內(nèi)聯(lián)模式, 腳本模式。
1、內(nèi)聯(lián)模式
直接在HTML標(biāo)簽中添加事件。這種模式是最傳統(tǒng)簡(jiǎn)單的一種處理事件的方法。但是這種模式中事件和HTML是混寫的, 并沒(méi)有將JS與HTML分離, 當(dāng)代碼量多了以后,對(duì)后期代碼維護(hù)和擴(kuò)展很不利。
<input type="button" value="按鈕" onclick="alert('hello');" />
2、腳本模式
使用腳本模式我們需要先獲取到元素節(jié)點(diǎn)對(duì)象, 再針對(duì)該節(jié)點(diǎn)對(duì)象添加事件。
var box = document.getElementById('box');
box.onclick = function() { //給box節(jié)點(diǎn)對(duì)象添加點(diǎn)擊事件onclick
console.log('Hello world!');
};
注意：內(nèi)聯(lián)里面調(diào)用的方法的this會(huì)指向window（傳遞this）腳本模式的this會(huì)指向當(dāng)前的調(diào)用者。
三、事件的分類
1、鼠標(biāo)事件
1.1 click事件
在用戶單擊鼠標(biāo)主鍵（通常是左鍵）或按鍵盤回車鍵時(shí)觸發(fā)。
注意：“鼠標(biāo)單擊”定義為，用戶在同一個(gè)位置完成一次mousedown動(dòng)作和mouseup動(dòng)作。它們的觸發(fā)順序是：mousedown首先觸 發(fā)，mouseup接著觸發(fā)，click最后觸發(fā)。
1.2 dblclick事件
在用戶雙擊鼠標(biāo)主鍵（通常是左鍵）時(shí)觸發(fā)。
1.3 mousemove事件
在鼠標(biāo)光標(biāo)在元素上移動(dòng)時(shí)反復(fù)觸發(fā)。
1.4 mouseover事件
在用戶把鼠標(biāo)光標(biāo)從元素外部移到元素內(nèi)部時(shí)觸發(fā)。
1.5 mouseout事件
在用戶把鼠標(biāo)光標(biāo)從一個(gè)元素移到另一個(gè)元素上時(shí)觸發(fā)。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素。
1.6 mouseenter事件
在用戶把鼠標(biāo)光標(biāo)從元素外部移到元素內(nèi)部時(shí)觸發(fā)。不會(huì)在光標(biāo)經(jīng)過(guò)后代元素時(shí)觸發(fā)。
1.7 mouseleave事件
在用戶把鼠標(biāo)光標(biāo)從元素內(nèi)部移到元素外部時(shí)觸發(fā)。也不會(huì)在光標(biāo)經(jīng)過(guò)后代元素時(shí)觸發(fā)
1.8 mousedown事件
在用戶按下任意鼠標(biāo)鍵時(shí)觸發(fā)。
1.9 mouseup事件
在用戶釋放鼠標(biāo)鍵時(shí)觸發(fā)。
1.10 contextmenu事件
contextmenu事件在一個(gè)節(jié)點(diǎn)上點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)，或者按下“上下文菜單”鍵時(shí)觸發(fā)。
document.oncontextmenu=function(){ return false; }
2、鍵盤事件
2.1 keydown事件
用戶按下鍵盤上某個(gè)鍵時(shí)觸發(fā)，而且持續(xù)按住會(huì)重復(fù)觸發(fā)。
2.2 keyup事件
用戶釋放鍵盤上某個(gè)鍵時(shí)觸發(fā)。
2.3 keypress事件
用戶按下鍵盤上某個(gè)鍵并產(chǎn)生字符時(shí)觸發(fā)，而且持續(xù)按住會(huì)重復(fù)觸發(fā)。Esc 鍵也會(huì)觸發(fā)這個(gè)事件。（非Ctrl、Alt、Shift和Meta）
注意：keypress和textinput事件是在新輸入的文本真正插入到聚焦的文檔元素前觸發(fā)的。 如果用戶一直按鍵不松開(kāi)，就會(huì)重復(fù)觸發(fā)keydown、keypress，直到用戶松開(kāi)才會(huì)觸發(fā)keyup。
3、HTML事件
3.1 load事件
在 window 對(duì)象上，load 事件會(huì)在整個(gè)頁(yè)面（包括所有外部資源如圖片、JavaScript 文件和 CSS 文件）加載完成后觸發(fā)。
3.2 unload事件
unload 事件會(huì)在文檔卸載完成后觸發(fā)。unload 事件一般是在從一個(gè)頁(yè)面導(dǎo)航到另一個(gè)頁(yè)面時(shí)觸發(fā)，最常用于清理引用，以避免內(nèi)存泄漏。
3.3 close事件
當(dāng)窗口關(guān)閉是觸發(fā)。
3.4 change事件
當(dāng) <input> 、 <select> 和 <textarea> 的值發(fā)生變化時(shí)都會(huì)觸發(fā)change事件。只有全部修改完成時(shí)它才會(huì)觸發(fā)。
具體分下面幾種情況：
- 激活單選框（radio）或復(fù)選框（checkbox）時(shí)觸發(fā)。
- 用戶提交時(shí)觸發(fā)。比如，從下列列表（select）完成選擇，在日期或文件輸入框完成選擇。
- 當(dāng)文本框或textarea元素的值發(fā)生改變，并且喪失焦點(diǎn)時(shí)觸發(fā)
3.5 select事件
在文本框（<input>或 textarea）上當(dāng)用戶選擇了一個(gè)或多個(gè)字符時(shí)觸發(fā)。
3.6 focus事件
當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)。
3.7 blur事件
當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。
3.8 reset事件
當(dāng)表單重置（所有表單成員的值變回默認(rèn)值）時(shí)觸發(fā)。
3.9 submit事件
當(dāng)表單數(shù)據(jù)向服務(wù)器提交時(shí)觸發(fā)。
注意：submit事件的發(fā)生對(duì)象是form元素，而不是button元素（即使它的類型是submit），因?yàn)樘峤坏氖潜韱危皇前?鈕
3.10 scorll事件
當(dāng)用戶滾動(dòng)包含滾動(dòng)條的元素時(shí)在元素上觸發(fā)。<body>元素包含已加載頁(yè)面的滾動(dòng)條。大多數(shù) HTML 事件與 window 對(duì)象和表單控件有關(guān)。
