鼠標(biāo)事件 （繼承MouseEvent接口）
| 鼠標(biāo)事件 | 描述 |
|---|---|
click |
按下鼠標(biāo)時觸發(fā) |
dblclick |
雙擊鼠標(biāo)時觸發(fā) |
mousedown |
按下鼠標(biāo)鍵時觸發(fā) |
mouseup |
釋放按下鼠標(biāo)鍵觸發(fā) |
mousemove |
鼠標(biāo)在節(jié)點(diǎn)內(nèi)部移動觸發(fā)荣回，持續(xù)移動，事件會持續(xù)觸發(fā)（會有性能問題） |
mouseenter |
鼠標(biāo)進(jìn)入節(jié)點(diǎn)觸發(fā)，進(jìn)入子節(jié)點(diǎn)不會觸發(fā)塘匣。（在節(jié)點(diǎn)內(nèi)只會觸發(fā)一次） |
mouseover |
鼠標(biāo)進(jìn)入節(jié)點(diǎn)觸發(fā)，進(jìn)入子節(jié)點(diǎn)會再一次觸發(fā) |
mouseout |
鼠標(biāo)離開節(jié)點(diǎn)觸發(fā)褒纲，離開父節(jié)點(diǎn)也會觸發(fā) |
mouseleave |
鼠標(biāo)離開節(jié)點(diǎn)觸發(fā)被环，離開父節(jié)點(diǎn)不會觸發(fā) |
contextmenu |
鼠標(biāo)右鍵(右鍵菜單)前觸發(fā)，或按下右鍵菜單時觸發(fā) |
wheel |
滾動鼠標(biāo)的滾輪時觸發(fā)模孩，繼承WheelEvent接口 |
觸發(fā)順序： mouseDown > mouseup > click > dblclick
mouseover 和 mouseenter 的共同點(diǎn)：鼠標(biāo)進(jìn)入一個節(jié)點(diǎn)觸發(fā)
區(qū)別：
- mouseover 會在子節(jié)點(diǎn)觸發(fā)多次
- mouseenter 只觸發(fā)一次
mouseout 和 mouseleave 共同點(diǎn)： 鼠標(biāo)離開一個節(jié)點(diǎn)時觸發(fā)
區(qū)別：
- 在父元素內(nèi)部離開一個子元素時，mouseout事件會觸發(fā)贮缅。
- 在父元素內(nèi)部離開一個子元素時榨咐，mouseout事件不會觸發(fā)。
鍵盤事件 （繼承KeyboardEvent接口）
| 鍵盤事件 | 描述 |
|---|---|
keydown |
按下鍵盤時觸發(fā) |
keypress |
按下有值的鍵觸發(fā)谴供，(無值鍵Ctrl块茁、Alt、Shift、Meta ) 数焊，會先出發(fā)keydown |
keyup |
松開鍵盤時觸發(fā) |
用戶一直按鍵不松開：
1.keydown
2.keypress
3.keydown
4.keypress
5. ...(重復(fù)上面過程)
6.keyup
進(jìn)度事件 （繼承ProgressEvent接口）
描述資源加載的進(jìn)度永淌。主要由AJAX、<img>佩耳、<audio>遂蛀、<video>、<style>干厚、<link> 等外部資源的加載觸發(fā)李滴。
| 進(jìn)度事件 | 描述 |
|---|---|
abort |
外部資源中止加載時（比如用戶取消）觸發(fā)，發(fā)生錯誤導(dǎo)致中止不會觸發(fā)蛮瞄。 |
error |
由于錯誤導(dǎo)致外部資源無法加載時觸發(fā)（error特性所坯，不會冒泡，不會觸發(fā)父元素的error時間監(jiān)聽函數(shù)） |
load |
外部資源加載成功時觸發(fā) |
loadstart |
外部資源開始加載時觸發(fā) |
loadend |
外部資源停止加載時觸發(fā)挂捅，發(fā)生順序在error芹助、abort、load等事件的后面籍凝。 |
progress |
外部資源加載過程中不斷觸發(fā) |
timeout |
加載超時時觸發(fā) |
注意：
按照習(xí)慣js腳本一般都放置在頁面底部周瞎，有時候圖片加載會在腳本運(yùn)行之前就完成，因此有可能load和error事件的監(jiān)聽函數(shù)不會執(zhí)行饵蒂。
解決辦法：使用complete屬性先判斷一下是否加載完成声诸。
function loaded(){
// ...
}
if(image.complete){
loaded();
}else{
image.addEventListener('load',loaded)
}
DOM元素節(jié)點(diǎn)沒有提供是否加載錯誤的屬性，所以error事件的監(jiān)聽函數(shù)最好放到<img>元素的HTML代碼中退盯，這樣可以保證發(fā)生加載錯誤時百分之百會執(zhí)行彼乌。
<img src="/wrong/url" onerror="this.style.display='none';"/>
loadend事件的監(jiān)聽函數(shù)，可以用來取代abort事件渊迁、load事件慰照、error事件的監(jiān)聽函數(shù)，因?yàn)榭偸窃谶@些事件之后發(fā)生琉朽。
拖拉事件 （繼承DragEvent接口）
DragEvent接口又繼承了MouseEvent接口和Event接口毒租。
拖拉的對象有好幾種，包括元素節(jié)點(diǎn)箱叁、圖片墅垮、鏈接、選中的文字等等耕漱。
元素節(jié)點(diǎn)是默認(rèn)不可以拖拽的算色，可以設(shè)置屬性draggable="true"改為可拖拽
元素被拖拽時，會持續(xù)觸發(fā)拖拉事件
| 拖拉事件 | 描述 |
|---|---|
drag |
在拖拽節(jié)點(diǎn)上持續(xù)觸發(fā)（間隔幾百毫秒） |
dragstart |
開始拖拉時螟够，在被拖拉的節(jié)點(diǎn)上觸發(fā) |
dragend |
拖拉結(jié)束時灾梦，在被拖拉的節(jié)點(diǎn)上觸發(fā) |
dragenter |
拖拉進(jìn)入當(dāng)前節(jié)點(diǎn)時峡钓，在當(dāng)前節(jié)點(diǎn)上觸發(fā)一次 |
dragover |
拖拉進(jìn)入當(dāng)前節(jié)點(diǎn)時，在當(dāng)前節(jié)點(diǎn)上持續(xù)觸發(fā)（間隔幾百毫秒） |
dragleave |
拖拉離開當(dāng)前節(jié)點(diǎn)范圍內(nèi)若河，在當(dāng)前節(jié)點(diǎn)上觸發(fā) |
drop |
釋放目標(biāo)節(jié)點(diǎn)時能岩，在目標(biāo)節(jié)點(diǎn)上觸發(fā)。 |
