JavaScript DOM 常用事件最新總結！

本文給大家總結了JS DOM的常用事件，具有一定的參考價值，感興趣的小夥伴們可以參考一下。

1 常用事件總結

1.1 滑鼠事件

click			單擊
dblclick		雙擊
contextmenu		右擊
mouseover		滑鼠懸停在元素上， 建議用 mouseenter 代替
mouseout		滑鼠離開元素，建議用 mouseleave 代替
mouseenter		滑鼠懸停在元素上
mouseleave		滑鼠離開元素
mousedown		滑鼠按鍵按下
mouseup		    滑鼠按鍵擡起
mousemove		滑鼠移動

1.2 鍵盤事件

keydown		鍵盤按鍵按下
keyup		鍵盤按鍵擡起
keypress	鍵盤按鍵按下，用於可輸入字元按鍵

1. 哪些元素可以監聽鍵盤事件？
① document
② 可以獲取焦點的元素（表單控制元件，尤其是可輸入的元素）

2. keydown 和 keypress 的區別？
① keydown 所有的按鍵按下都可以觸發，無法區分大小寫按鍵。
② keypress 只有可輸入字元按鍵按下才可以觸發，可以區分大小寫按鍵。

3. 如何獲取按下的是哪個按鍵？
使用 event 物件中的屬性：
evnet.keyCode 獲取按鍵對應的 ascii 值
event.which 同 keyCode
event.key 獲取按鍵的字元值。

1.3 檔案事件

load				頁面中所有的一切載入完畢就會觸發，可以監聽到window上或者body元素
DOMContentLoaded	頁面中所有的元素載入完畢就會觸發，可以監聽在window或者document上， 只能使用 						addEventListener 監聽事件
beforeunload		當關閉網頁的時候觸發

load 事件與 DOMContentLoaded 事件的區別：
① load 事件是頁面中所有的一切載入完畢才能觸發，包括元素以及外部資源。
② DOMContentLoaded 事件是頁面中所有的元素載入完畢就可以觸發，不包括外部資源。

1.4 表單事件

submit		當表單提交的時候觸發，該事件監聽到form元素	
reset		當表單重置的時候觸發，該事件監聽到form元素
focus		當表單控制元件獲取焦點的時候觸發
blur		當表控制元件單失去焦點的時候觸發
select		輸入框或文字域中的內容被選中
change		對於輸入框，內容改變且失去焦點才會觸發；適合用於select

1.5 圖片事件

load		圖片檔案下載完畢
error		圖片載入失敗

1.6 其他事件

resize		監聽到 window上，視口大小發生改變
scroll		監聽到window或者是具有捲動體的元素，頁面或元素中的內容發生捲動就觸發。

2 Event 物件

2.1 獲取 Event 物件

給事件的回撥函數設定第一個形參，就可以獲取 event 物件。

不同型別的事件獲取的 Event 物件型別也不同。

2.2 滑鼠事件物件 MouseEvent 的屬性和方法

offsetX / offsetY		獲取滑鼠在目標元素上的座標位置
clientX / clientY		獲取滑鼠在視口上的座標位置
pageX / pageY			獲取滑鼠在頁面上的座標位置
screenX / screenY       獲取滑鼠在螢幕上的座標位置
button					獲取按的是哪個滑鼠按鍵， 0：左鍵； 1:中間鍵; 2:右鍵

2.3 鍵盤事件物件 KeyBorardEvent 的屬性和方法

keyCode		獲取按鍵對應的編碼值
which		同 keyCode
key			獲取按鍵對應的字元值

2.4 所有型別的事件物件都有的屬性和方法

type				獲取事件名
timeStamp			獲取觸發事件時距離開啟頁面時的毫秒數
target				獲取目標元素
stopPropagation()	阻止事件冒泡
preventDefault()	阻止瀏覽器預設行為

2.5 阻止事件冒泡

在事件的回撥函數中執行 event.stopPropagation()，就可以阻止冒泡。

2.6 瀏覽器的預設行為

① 瀏覽器有哪些預設行為

超連結點選跳轉
表單的提交和重置
右鍵彈出系統選單
等...

② 阻止瀏覽器預設行為

在事件的回撥函數中呼叫 event.preventDefault() 即可阻止預設行為。

注意： 如果使用第二種方式監聽事件，在回撥函數中 return false 同樣可以阻止預設行為。

3 事件委託

事件監聽到祖先元素上，判斷目標元素，如果目標元素滿足條件，就執行相關操作。

事件委託的優勢：

對於給大量的元素監聽相同的事件，使用事件委託比遍歷挨個監聽效率更好。
利用事件委託可以讓新增的元素也可以響應事件。