JavaScript DOM常用事件實例分析

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

1 常用事件總結(jié)

click			單擊
dblclick		雙擊
contextmenu		右擊
mouseover		鼠標(biāo)懸停在元素上， 建議用 mouseenter 代替
mouseout		鼠標(biāo)離開元素，建議用 mouseleave 代替
mouseenter		鼠標(biāo)懸停在元素上
mouseleave		鼠標(biāo)離開元素
mousedown		鼠標(biāo)按鍵按下
mouseup		    鼠標(biāo)按鍵抬起
mousemove		鼠標(biāo)移動

1.2 鍵盤事件

keydown		鍵盤按鍵按下
keyup		鍵盤按鍵抬起
keypress	鍵盤按鍵按下，用于可輸入字符按鍵

1. 哪些元素可以監(jiān)聽鍵盤事件？

① document

② 可以獲取焦點的元素（表單控件，尤其是可輸入的元素）

2. keydown 和 keypress 的區(qū)別？

① keydown 所有的按鍵按下都可以觸發(fā)，無法區(qū)分大小寫按鍵。

② keypress 只有可輸入字符按鍵按下才可以觸發(fā)，可以區(qū)分大小寫按鍵。

3. 如何獲取按下的是哪個按鍵？

使用 event 對象中的屬性：

• evnet.keyCode 獲取按鍵對應(yīng)的 ascii 值

• event.which 同 keyCode

• event.key 獲取按鍵的字符值。

1.3 文檔事件

load				頁面中所有的一切加載完畢就會觸發(fā)，可以監(jiān)聽到window上或者body元素
DOMContentLoaded	頁面中所有的元素加載完畢就會觸發(fā)，可以監(jiān)聽在window或者document上， 只能使用 						addEventListener 監(jiān)聽事件
beforeunload		當(dāng)關(guān)閉網(wǎng)頁的時候觸發(fā)

load 事件與 DOMContentLoaded 事件的區(qū)別：

① load 事件是頁面中所有的一切加載完畢才能觸發(fā)，包括元素以及外部資源。

② DOMContentLoaded 事件是頁面中所有的元素加載完畢就可以觸發(fā)，不包括外部資源。

1.4 表單事件

submit		當(dāng)表單提交的時候觸發(fā)，該事件監(jiān)聽到form元素	
reset		當(dāng)表單重置的時候觸發(fā)，該事件監(jiān)聽到form元素
focus		當(dāng)表單控件獲取焦點的時候觸發(fā)
blur		當(dāng)表控件單失去焦點的時候觸發(fā)
select		輸入框或文本域中的內(nèi)容被選中
change		對于輸入框，內(nèi)容改變且失去焦點才會觸發(fā)；適合用于select

1.5 圖片事件

load		圖片文件下載完畢
error		圖片加載失敗

1.6 其他事件

resize		監(jiān)聽到 window上，視口大小發(fā)生改變
scroll		監(jiān)聽到window或者是具有滾動體的元素，頁面或元素中的內(nèi)容發(fā)生滾動就觸發(fā)。

2 Event 對象

2.1 獲取 Event 對象

給事件的回調(diào)函數(shù)設(shè)置第一個形參，就可以獲取 event 對象。

不同類型的事件獲取的 Event 對象類型也不同。

2.2 鼠標(biāo)事件對象 MouseEvent 的屬性和方法

offsetX / offsetY		獲取鼠標(biāo)在目標(biāo)元素上的坐標(biāo)位置
clientX / clientY		獲取鼠標(biāo)在視口上的坐標(biāo)位置
pageX / pageY			獲取鼠標(biāo)在頁面上的坐標(biāo)位置
screenX / screenY       獲取鼠標(biāo)在屏幕上的坐標(biāo)位置
button					獲取按的是哪個鼠標(biāo)按鍵， 0：左鍵； 1:中間鍵; 2:右鍵

2.3 鍵盤事件對象 KeyBorardEvent 的屬性和方法

keyCode		獲取按鍵對應(yīng)的編碼值
which		同 keyCode
key			獲取按鍵對應(yīng)的字符值

2.4 所有類型的事件對象都有的屬性和方法

type				獲取事件名
timeStamp			獲取觸發(fā)事件時距離打開頁面時的毫秒數(shù)
target				獲取目標(biāo)元素
stopPropagation()	阻止事件冒泡
preventDefault()	阻止瀏覽器默認(rèn)行為

2.5 阻止事件冒泡

在事件的回調(diào)函數(shù)中執(zhí)行 event.stopPropagation()，就可以阻止冒泡。

2.6 瀏覽器的默認(rèn)行為

① 瀏覽器有哪些默認(rèn)行為

超鏈接點擊跳轉(zhuǎn)
表單的提交和重置
右鍵彈出系統(tǒng)菜單
等...

② 阻止瀏覽器默認(rèn)行為

在事件的回調(diào)函數(shù)中調(diào)用 event.preventDefault() 即可阻止默認(rèn)行為。

注意： 如果使用第二種方式監(jiān)聽事件，在回調(diào)函數(shù)中 return false 同樣可以阻止默認(rèn)行為。

3 事件委托

事件監(jiān)聽到祖先元素上，判斷目標(biāo)元素，如果目標(biāo)元素滿足條件，就執(zhí)行相關(guān)操作。

事件委托的優(yōu)勢：

• 對于給大量的元素監(jiān)聽相同的事件，使用事件委托比遍歷挨個監(jiān)聽效率更好。

• 利用事件委托可以讓新增的元素也可以響應(yīng)事件。

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