溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“JavaScript DOM常用事件實例分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
click 單擊 dblclick 雙擊 contextmenu 右擊 mouseover 鼠標懸停在元素上， 建議用 mouseenter 代替 mouseout 鼠標離開元素，建議用 mouseleave 代替 mouseenter 鼠標懸停在元素上 mouseleave 鼠標離開元素 mousedown 鼠標按鍵按下 mouseup 鼠標按鍵抬起 mousemove 鼠標移動
keydown 鍵盤按鍵按下 keyup 鍵盤按鍵抬起 keypress 鍵盤按鍵按下，用于可輸入字符按鍵
1. 哪些元素可以監聽鍵盤事件？
① document
② 可以獲取焦點的元素（表單控件，尤其是可輸入的元素）
2. keydown 和 keypress 的區別？
① keydown 所有的按鍵按下都可以觸發，無法區分大小寫按鍵。
② keypress 只有可輸入字符按鍵按下才可以觸發，可以區分大小寫按鍵。
3. 如何獲取按下的是哪個按鍵？
使用 event 對象中的屬性：
evnet.keyCode 獲取按鍵對應的 ascii 值
event.which 同 keyCode
event.key 獲取按鍵的字符值。
load 頁面中所有的一切加載完畢就會觸發，可以監聽到window上或者body元素 DOMContentLoaded 頁面中所有的元素加載完畢就會觸發，可以監聽在window或者document上， 只能使用 addEventListener 監聽事件 beforeunload 當關閉網頁的時候觸發
load 事件與 DOMContentLoaded 事件的區別：
① load 事件是頁面中所有的一切加載完畢才能觸發，包括元素以及外部資源。
② DOMContentLoaded 事件是頁面中所有的元素加載完畢就可以觸發，不包括外部資源。
submit 當表單提交的時候觸發，該事件監聽到form元素 reset 當表單重置的時候觸發，該事件監聽到form元素 focus 當表單控件獲取焦點的時候觸發 blur 當表控件單失去焦點的時候觸發 select 輸入框或文本域中的內容被選中 change 對于輸入框，內容改變且失去焦點才會觸發；適合用于select
load 圖片文件下載完畢 error 圖片加載失敗
resize 監聽到 window上，視口大小發生改變 scroll 監聽到window或者是具有滾動體的元素，頁面或元素中的內容發生滾動就觸發。
給事件的回調函數設置第一個形參，就可以獲取 event 對象。
不同類型的事件獲取的 Event 對象類型也不同。
offsetX / offsetY 獲取鼠標在目標元素上的坐標位置 clientX / clientY 獲取鼠標在視口上的坐標位置 pageX / pageY 獲取鼠標在頁面上的坐標位置 screenX / screenY 獲取鼠標在屏幕上的坐標位置 button 獲取按的是哪個鼠標按鍵， 0：左鍵； 1:中間鍵; 2:右鍵
keyCode 獲取按鍵對應的編碼值 which 同 keyCode key 獲取按鍵對應的字符值
type 獲取事件名 timeStamp 獲取觸發事件時距離打開頁面時的毫秒數 target 獲取目標元素 stopPropagation() 阻止事件冒泡 preventDefault() 阻止瀏覽器默認行為
在事件的回調函數中執行 event.stopPropagation()，就可以阻止冒泡。
超鏈接點擊跳轉 表單的提交和重置 右鍵彈出系統菜單 等...
在事件的回調函數中調用 event.preventDefault() 即可阻止默認行為。
注意： 如果使用第二種方式監聽事件，在回調函數中
return false同樣可以阻止默認行為。
事件監聽到祖先元素上，判斷目標元素，如果目標元素滿足條件，就執行相關操作。
事件委托的優勢：
對于給大量的元素監聽相同的事件，使用事件委托比遍歷挨個監聽效率更好。
利用事件委托可以讓新增的元素也可以響應事件。
“JavaScript DOM常用事件實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
