JavaScript之常用事件類型有哪些

本篇內(nèi)容介紹了“JavaScript之常用事件類型有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

鼠標(biāo)事件

事件類型

• click：用戶單擊主鼠標(biāo)按鈕（一般是左鍵）或者按下在聚焦時(shí)按下回車鍵時(shí)觸發(fā)

• dblclick：用戶雙擊主鼠標(biāo)按鍵觸發(fā)（頻率取決于系統(tǒng)配置）

• mousedown：用戶按下鼠標(biāo)任意按鍵時(shí)觸發(fā)

• mouseup：用戶抬起鼠標(biāo)任意按鍵時(shí)觸發(fā)

• mousemove：鼠標(biāo)在元素上移動(dòng)時(shí)觸發(fā)

• mouseover：鼠標(biāo)進(jìn)入元素時(shí)觸發(fā)

• mouseout：鼠標(biāo)離開元素時(shí)觸發(fā)

• mouseenter：鼠標(biāo)進(jìn)入元素時(shí)觸發(fā)，該事件不會(huì)冒泡

• mouseleave：鼠標(biāo)離開元素時(shí)觸發(fā)，該事件不會(huì)冒泡

區(qū)別：

• over和out，不考慮子元素，從父元素移動(dòng)到子元素，對(duì)于父元素而言，仍然算作離開

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

• mouseenter和mouseleave不會(huì)冒泡

事件對(duì)象

所有的鼠標(biāo)事件，事件處理程序中的事件對(duì)象，都為 MouseEvent

• altKey：觸發(fā)事件時(shí)，是否按下了鍵盤的alt鍵

• ctrlKey：觸發(fā)事件時(shí)，是否按下了鍵盤的ctrl鍵

• shiftKey：觸發(fā)事件時(shí)，是否按下了鍵盤的shift鍵

• button：觸發(fā)事件時(shí)，鼠標(biāo)按鍵類型

• 0：左鍵

• 1：中鍵

• 2：右鍵

位置

• page：pageX、pageY，當(dāng)前鼠標(biāo)距離頁(yè)面的橫縱坐標(biāo)

• client: clientX、clientY，鼠標(biāo)相對(duì)于視口的坐標(biāo)

• offset：offsetX、offsetY，鼠標(biāo)相對(duì)于事件源的內(nèi)邊距的坐標(biāo)

• screen: screenX、screenY，鼠標(biāo)相對(duì)于屏幕

• x、y，等同于clientX、clientY

• movement：movementX、movementY，只在鼠標(biāo)移動(dòng)事件中有效，相對(duì)于上一次鼠標(biāo)位置，偏移的距離

鍵盤事件

事件類型

• keydown：按下鍵盤上任意鍵觸發(fā)，如果按住不放，會(huì)重復(fù)觸發(fā)此事件

• keypress：按下鍵盤上一個(gè)字符鍵時(shí)觸發(fā)

• keyup：抬起鍵盤上任意鍵觸發(fā)

keydown、keypress 如果阻止了事件默認(rèn)行為，文本不會(huì)顯示。

事件對(duì)象

KeyboardEvent

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

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

• keyCode、which：得到鍵盤編碼

表單事件

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

• blur：元素失去焦點(diǎn)時(shí)觸發(fā)，該事件不會(huì)冒泡。

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

• change：文本改變事件

• input: 文本改變事件，即時(shí)觸發(fā)

其他事件

window全局對(duì)象

• load、DOMContentLoaded、readystatechange

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

瀏覽器渲染頁(yè)面的過(guò)程：

1. 得到頁(yè)面源代碼

2. 創(chuàng)建document節(jié)點(diǎn)

3. 從上到下，將元素依次添加到dom樹中，每添加一個(gè)元素，進(jìn)行預(yù)渲染

4. 按照結(jié)構(gòu)，依次渲染子節(jié)點(diǎn)

document的DOMContentLoaded: dom樹構(gòu)建完成后發(fā)生

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

interactive：觸發(fā)DOMContentLoaded事件

complete：觸發(fā)window的load事件

readystatechange（當(dāng)頁(yè)面狀態(tài)發(fā)生改變的時(shí)候觸發(fā)//返回改變后的狀態(tài)）

js代碼應(yīng)該盡量寫到頁(yè)面底部

• css應(yīng)該寫到頁(yè)面頂部：避免出現(xiàn)閃爍（如果放到頁(yè)面底部，會(huì)導(dǎo)致元素先沒有樣式，使用丑陋的默認(rèn)樣式，然后當(dāng)讀到css文件后，重新改變樣式）

• JS應(yīng)該寫到頁(yè)面底部：避免阻塞后續(xù)的渲染，也避免運(yùn)行JS時(shí)，得不到頁(yè)面中的元素。

• unload、beforeunload

beforeunload: window的事件，關(guān)閉窗口時(shí)運(yùn)行，可以阻止關(guān)閉窗口
unload：window的事件，關(guān)閉窗口時(shí)運(yùn)行

• scroll

窗口發(fā)生滾動(dòng)時(shí)運(yùn)行的事件

通過(guò)scrollTop和scrollLeft，可以獲取和設(shè)置滾動(dòng)距離。

• resize

窗口尺寸發(fā)生改變時(shí)運(yùn)行的事件，監(jiān)聽的是視口尺寸

• contextmenu

右鍵菜單事件

• paste

粘貼事件

• copy

復(fù)制事件

• cut

幾張距離圖片

元素位置

• offsetParent

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

body的offsetParent為null

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

相對(duì)于該元素的offsetParent的坐標(biāo)

如果offsetParent是body，則將其當(dāng)作是整個(gè)網(wǎng)頁(yè)

• getBoundingClientRect方法

該方法得到一個(gè)對(duì)象，該對(duì)象記錄了該元素相對(duì)于視口的距離

事件模擬

• click 模擬點(diǎn)擊

• sumbit 模擬提交form

• dispatchEvent模擬事件

其他補(bǔ)充

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

window.scrollX、window.pageXOffset: 相當(dāng)于根元素的scrollLeft

window.scrollY、window.pageYOffset: 相當(dāng)于根元素的scrollTop

• scrollTo、scrollBy

scrollTo: 設(shè)置滾動(dòng)條位置 //window.scrollTo(x , y) 所有dom對(duì)象都可以用
scrollBy:表示原來(lái)的基礎(chǔ)上增加x和y軸距離 window.scrollBy(x, y)

• resizeTo、resizeBy

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