1. 程式人生 > >瀏覽器滑塊、滑鼠事件、滑鼠滑輪、鍵盤事件詳細說明

瀏覽器滑塊、滑鼠事件、滑鼠滑輪、鍵盤事件詳細說明

滑鼠滑輪

必須是在 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   獲取

當前頁面相對於視窗顯示區左上角的位置, 即滑塊距文件頂端位置,IE8之前不支援

  document.body.scrollTop   也是同樣的功能,滑塊位置,相容ie

  document.body.clientHeight  獲取body物件高度

  document.body.scrollHeight   獲取body可滾動高度,但有最小值(即是瀏覽器視覺化高度),與document.documentElement.scrollHeight  類似,唯一區別就是最小值

body.scrollHeight與documentElement.scrollHeight區別:

    當高度大於瀏覽器視覺化高度時,兩個值相等,否則

body就是瀏覽器視覺化高度,documentElement顯示真實高度

  document.documentElement.clientHeight  獲取視覺化物件高度,即是當前瀏覽器顯示文件區域的高度,瀏覽器縮小,它也就變小

document.documentElement.scrollHeight  獲取document文件的高度,為真實高度

clientHeight與scrollHeight區別:clientHeight顯示當前物件的可顯示真實高度(不包括浮動、絕對定位等脫離文件流元素高度,scrollHeight是當前整個物件可滑動的高度(包括裡面的脫離文件流高度)

滑鼠按鍵檢測

必須是在 mousedownmouseupmousemove 事件中

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         返回陣列  事件冒泡路徑,當前節點、bodyhtmldocumentwindow,     

                   FF沒有該屬性,注意相容性

event.timeStamp 事件屬性可返回一個時間戳。指示發生事件的日期和時間(從 epoch 開始的毫秒數)。epoch 是一個事件參考點。在這裡,它是客戶機啟動的時間。

鍵盤事件

要觸發鍵盤事件,滑鼠必須要獲取游標(div,就必須設定為可編輯狀態,document預設支援),keydown keypresskeyup

KeyPress 只能捕獲單個字元

KeyDown KeyUp 可以捕獲組合鍵

event.key   那個按鍵 字元, 對應鍵盤上的字元

event.code  返回  key +字元,非26個字母就返回 鍵盤對應字元與key一樣,數字特殊

event.keyCode 字元對應的ascii ,event.which主要是用於非鍵盤事件

鍵盤按下不放時:不斷觸發keydownkeypress,只觸發鍵盤釋放的那一次keyup,

當按下一個鍵不放的同時按下另一個鍵,則之前的keydown事件會釋放,不在執行。

組合按鍵:針對ctrlaltshiftkey最好使用keyup來監聽,(keydown會因為之前按鈕的按下一直執行監聽,影響效率) event.ctrlkkey&&event.keyCode==83 監聽ctrl+s,

還需注意鍵盤預設的組合事件,在需要的時候preventDefault()