瀏覽器滑塊、滑鼠事件、滑鼠滑輪、鍵盤事件詳細說明
滑鼠滑輪
必須是在 mousewheel 事件中
註冊事件 window.addEventListener(“mousewheel ”,function(){});
event.deltaY 獲取滑輪沒一格滑動的畫素,正負表示變化趨勢,正增加
event.wheelDeltaY 正表示向上滑動,負表示向下
滑鼠位置
clientX 設定或獲取滑鼠指標位置相對於視窗客戶區域的 x 座標,其中客戶區域不包括視窗
自身的控制元件和滾動條。
clientY 設定或獲取滑鼠指標位置相對於視窗客戶區域的 y 座標,其中客戶區域不包括視窗
自身的控制元件和滾動條。
offsetX 設定或獲取滑鼠指標位置相對於觸發事件的物件的 x 座標。
offsetY 設定或獲取滑鼠指標位置相對於觸發事件的物件的 y 座標。
screenX 設定或獲取獲取滑鼠指標位置相對於使用者螢幕的 x 座標。
screenY 設定或獲取滑鼠指標位置相對於使用者螢幕的 y 座標。
x 設定或獲取滑鼠指標位置相對於父文件的 x 畫素座標。
y 設定或獲取滑鼠指標位置相對於父文件的 y 畫素座標。
瀏覽器滑動條
註冊事件 window.addEventListener(“scroll”,function(){});
window.pageYOffset 獲取
document.body.scrollTop 也是同樣的功能,滑塊位置,相容ie
document.body.clientHeight 獲取body物件高度
document.body.scrollHeight 獲取body可滾動高度,但有最小值(即是瀏覽器視覺化高度),與document.documentElement.scrollHeight 類似,唯一區別就是最小值
body.scrollHeight與documentElement.scrollHeight區別:
當高度大於瀏覽器視覺化高度時,兩個值相等,否則
document.documentElement.clientHeight 獲取視覺化物件高度,即是當前瀏覽器顯示文件區域的高度,瀏覽器縮小,它也就變小
document.documentElement.scrollHeight 獲取document文件的高度,為真實高度
clientHeight與scrollHeight區別:clientHeight顯示當前物件的可顯示真實高度(不包括浮動、絕對定位等脫離文件流元素高度,scrollHeight是當前整個物件可滑動的高度(包括裡面的脫離文件流高度)
滑鼠按鍵檢測
必須是在 mousedown、mouseup、mousemove 事件中
event.button 0|1|2 ,分別表示滑鼠左鍵、中、右
event.which 鍵值的ascii
特殊鍵檢測
event.altKey 檢測事件發生時Alt鍵是否被按住了 true表示按下並保持
event.ctrlKey event.shiftKey 同理
事件機制
event.cancelable 取消預設事件 preventDefault()一樣
event.cancelBubble 取消冒泡事件 event.stopPropagation()
event.srcElement 事件發生源
event.target 事件發生源
event.currentTarget 事件發生冒泡到該當前元素
event.path 返回陣列 事件冒泡路徑,當前節點、body、html、document、window,
FF沒有該屬性,注意相容性
event.timeStamp 事件屬性可返回一個時間戳。指示發生事件的日期和時間(從 epoch 開始的毫秒數)。epoch 是一個事件參考點。在這裡,它是客戶機啟動的時間。
鍵盤事件
要觸發鍵盤事件,滑鼠必須要獲取游標(div,就必須設定為可編輯狀態,document預設支援),keydown 、keypress、keyup
KeyPress 只能捕獲單個字元
KeyDown 和KeyUp 可以捕獲組合鍵
event.key 那個按鍵 字元, 對應鍵盤上的字元
event.code 返回 key +字元,非26個字母就返回 鍵盤對應字元與key一樣,數字特殊
event.keyCode 字元對應的ascii ,event.which主要是用於非鍵盤事件
鍵盤按下不放時:不斷觸發keydown、keypress,只觸發鍵盤釋放的那一次keyup,
當按下一個鍵不放的同時按下另一個鍵,則之前的keydown事件會釋放,不在執行。
組合按鍵:針對ctrl、alt、shiftkey最好使用keyup來監聽,(keydown會因為之前按鈕的按下一直執行監聽,影響效率) event.ctrlkkey&&event.keyCode==83 監聽ctrl+s,
還需注意鍵盤預設的組合事件,在需要的時候preventDefault()