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 事件委託

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

事件委託的優勢：

• 對於給大量的元素監聽相同的事件，使用事件委託比遍歷挨個監聽效率更好。

• 利用事件委託可以讓新增的元素也可以回應事件。

相關推薦：【JavaScript影片教學】

#

以上是JavaScript DOM 常用事件最新總結！的詳細內容。更多資訊請關注PHP中文網其他相關文章！