JavaScript之常用事件類型有哪些

本篇內容介紹了“JavaScript之常用事件類型有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

鼠標事件

事件類型

• click：用戶單擊主鼠標按鈕（一般是左鍵）或者按下在聚焦時按下回車鍵時觸發

• dblclick：用戶雙擊主鼠標按鍵觸發（頻率取決于系統配置）

• mousedown：用戶按下鼠標任意按鍵時觸發

• mouseup：用戶抬起鼠標任意按鍵時觸發

• mousemove：鼠標在元素上移動時觸發

• mouseover：鼠標進入元素時觸發

• mouseout：鼠標離開元素時觸發

• mouseenter：鼠標進入元素時觸發，該事件不會冒泡

• mouseleave：鼠標離開元素時觸發，該事件不會冒泡

區別：

• over和out，不考慮子元素，從父元素移動到子元素，對于父元素而言，仍然算作離開

• enter和leave，考慮子元素，子元素仍然是父元素的一部分

• mouseenter和mouseleave不會冒泡

事件對象

所有的鼠標事件，事件處理程序中的事件對象，都為 MouseEvent

• altKey：觸發事件時，是否按下了鍵盤的alt鍵

• ctrlKey：觸發事件時，是否按下了鍵盤的ctrl鍵

• shiftKey：觸發事件時，是否按下了鍵盤的shift鍵

• button：觸發事件時，鼠標按鍵類型

• 0：左鍵

• 1：中鍵

• 2：右鍵

位置

• page：pageX、pageY，當前鼠標距離頁面的橫縱坐標

• client: clientX、clientY，鼠標相對于視口的坐標

• offset：offsetX、offsetY，鼠標相對于事件源的內邊距的坐標

• screen: screenX、screenY，鼠標相對于屏幕

• x、y，等同于clientX、clientY

• movement：movementX、movementY，只在鼠標移動事件中有效，相對于上一次鼠標位置，偏移的距離

鍵盤事件

事件類型

• keydown：按下鍵盤上任意鍵觸發，如果按住不放，會重復觸發此事件

• keypress：按下鍵盤上一個字符鍵時觸發

• keyup：抬起鍵盤上任意鍵觸發

keydown、keypress 如果阻止了事件默認行為，文本不會顯示。

事件對象

KeyboardEvent

• code：得到按鍵字符串，適配鍵盤布局。

• key：得到按鍵字符串，不適配鍵盤布局。能得到打印字符。

• keyCode、which：得到鍵盤編碼

表單事件

• focus：元素聚焦的時候觸發（能與用戶發生交互的元素，都可以聚焦），該事件不會冒泡

• blur：元素失去焦點時觸發，該事件不會冒泡。

• submit：提交表單事件，僅在form元素有效。

• change：文本改變事件

• input: 文本改變事件，即時觸發

其他事件

window全局對象

• load、DOMContentLoaded、readystatechange

window的load：頁面中所有資源全部加載完畢的事件
圖片的load：圖片資源加載完畢的事件

瀏覽器渲染頁面的過程：

1. 得到頁面源代碼

2. 創建document節點

3. 從上到下，將元素依次添加到dom樹中，每添加一個元素，進行預渲染

4. 按照結構，依次渲染子節點

document的DOMContentLoaded: dom樹構建完成后發生

readystate(頁面有三個狀
態): loading(正在加載中)、interactive(可交互)、complete(完成)

interactive：觸發DOMContentLoaded事件

complete：觸發window的load事件

readystatechange（當頁面狀態發生改變的時候觸發//返回改變后的狀態）

js代碼應該盡量寫到頁面底部

• css應該寫到頁面頂部：避免出現閃爍（如果放到頁面底部，會導致元素先沒有樣式，使用丑陋的默認樣式，然后當讀到css文件后，重新改變樣式）

• JS應該寫到頁面底部：避免阻塞后續的渲染，也避免運行JS時，得不到頁面中的元素。

• unload、beforeunload

beforeunload: window的事件，關閉窗口時運行，可以阻止關閉窗口
unload：window的事件，關閉窗口時運行

• scroll

窗口發生滾動時運行的事件

通過scrollTop和scrollLeft，可以獲取和設置滾動距離。

• resize

窗口尺寸發生改變時運行的事件，監聽的是視口尺寸

• contextmenu

右鍵菜單事件

• paste

粘貼事件

• copy

復制事件

• cut

幾張距離圖片

元素位置

• offsetParent

獲取某個元素第一個定位的祖先元素，如果沒有，則得到body

body的offsetParent為null

• offsetLeft、offsetTop //距離定位元素的距離 沒有就是距離body

相對于該元素的offsetParent的坐標

如果offsetParent是body，則將其當作是整個網頁

• getBoundingClientRect方法

該方法得到一個對象，該對象記錄了該元素相對于視口的距離

事件模擬

• click 模擬點擊

• sumbit 模擬提交form

• dispatchEvent模擬事件

其他補充

• window.scrollX、window.pageXOffset、window.scrollY、window.pageYOffset

window.scrollX、window.pageXOffset: 相當于根元素的scrollLeft

window.scrollY、window.pageYOffset: 相當于根元素的scrollTop

• scrollTo、scrollBy

scrollTo: 設置滾動條位置 //window.scrollTo(x , y) 所有dom對象都可以用
scrollBy:表示原來的基礎上增加x和y軸距離 window.scrollBy(x, y)

• resizeTo、resizeBy

“JavaScript之常用事件類型有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！