建站
咨詢
售后
建站咨詢
新聞中心
本篇內(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證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！
1 常用事件總結(jié)
click 單擊 dblclick 雙擊 contextmenu 右擊 mouseover 鼠標(biāo)懸停在元素上， 建議用 mouseenter 代替 mouseout 鼠標(biāo)離開(kāi)元素，建議用 mouseleave 代替 mouseenter 鼠標(biāo)懸停在元素上 mouseleave 鼠標(biāo)離開(kāi)元素 mousedown 鼠標(biāo)按鍵按下 mouseup 鼠標(biāo)按鍵抬起 mousemove 鼠標(biāo)移動(dòng)
1.2 鍵盤事件
keydown 鍵盤按鍵按下 keyup 鍵盤按鍵抬起 keypress 鍵盤按鍵按下，用于可輸入字符按鍵
1. 哪些元素可以監(jiān)聽(tīng)鍵盤事件？
① 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)聽(tīng)到window上或者body元素 DOMContentLoaded 頁(yè)面中所有的元素加載完畢就會(huì)觸發(fā)，可以監(jiān)聽(tīng)在window或者document上， 只能使用 addEventListener 監(jiān)聽(tīng)事件 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)聽(tīng)到form元素 reset 當(dāng)表單重置的時(shí)候觸發(fā)，該事件監(jiān)聽(tīng)到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)聽(tīng)到 window上，視口大小發(fā)生改變 scroll 監(jiān)聽(tīng)到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í)距離打開(kāi)頁(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)聽(tīng)事件，在回調(diào)函數(shù)中
return false同樣可以阻止默認(rèn)行為。
3 事件委托
事件監(jiān)聽(tīng)到祖先元素上，判斷目標(biāo)元素，如果目標(biāo)元素滿足條件，就執(zhí)行相關(guān)操作。
事件委托的優(yōu)勢(shì)：
對(duì)于給大量的元素監(jiān)聽(tīng)相同的事件，使用事件委托比遍歷挨個(gè)監(jiān)聽(tīng)效率更好。
利用事件委托可以讓新增的元素也可以響應(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í)例分析
網(wǎng)站URL：http://fisionsoft.com.cn/article/jdchdp.html
