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

松滋ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

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)移動(dòng)

1.2 鍵盤事件

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

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

① document

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

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

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

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

3. 如何獲取按下的是哪個(gè)按鍵？

使用 event 對(duì)象中的屬性：

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

• event.which 同 keyCode

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

1.3 文檔事件

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

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

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

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

1.4 表單事件

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

1.5 圖片事件

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

1.6 其他事件

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

2 Event 對(duì)象

2.1 獲取 Event 對(duì)象

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

不同類型的事件獲取的 Event 對(duì)象類型也不同。

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

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

2.3 鍵盤事件對(duì)象 KeyBorardEvent 的屬性和方法

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

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

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

2.5 阻止事件冒泡

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

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

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

超鏈接點(diǎ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)勢(shì)：

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

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

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

網(wǎng)頁(yè)名稱：JavaScriptDOM常用事件實(shí)例分析
文章鏈接：http://m.2m8n56k.cn/article18/jdchdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、微信公眾號(hào)、網(wǎng)站營(yíng)銷、移動(dòng)網(wǎng)站建設(shè)、用戶體驗(yàn)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)