JavaScript之常用事件類型整理

這篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於JavaScript常用事件類型的相關問題，包括了滑鼠事件、鍵盤事件等等內容，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

滑鼠事件

事件類型

• 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全域物件
2. load、DOMContentLoaded、readystatechange
3. window的load：頁面中所有資源全部載入完畢的事件
4. 圖片的load：圖片資源載入完畢的事件

瀏覽器渲染頁面的過程：

得到頁面原始碼

建立document節點

從上到下，將元素依序加入dom樹中，每新增一個元素，進行預先渲染

依照結構，依序渲染子節點

#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影片教學、web前端】

以上是JavaScript之常用事件類型整理的詳細內容。更多資訊請關注PHP中文網其他相關文章！