技術文章 » JavaScript之常用事件型別整理

JavaScript之常用事件型別整理

2022-08-04 18:02:46
本篇文章給大家帶來了關於的相關知識，其中主要介紹了關於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之常用事件型別整理的詳細內容，更多請關注TW511.COM其它相關文章！