JavaScript焦點事件、鼠標事件和滾輪事件使用詳解_javascript技巧

一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有：

blur：元素失去焦點，不會冒泡；
DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin；
DOMFocusOut：同HTML事件blur，于DOM3遭廢棄，選用focusout；
focus：元素獲得焦點，不回冒泡；
focusin：獲得焦點，與HTML事件focus等價，但會冒泡；
focusout：失去焦點，與HTML事件blur等價；
如：

當焦點從頁面中的一個元素轉(zhuǎn)移到另一個元素會觸發(fā)下面的事件：

focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

鼠標事件

DOM3級事件中定義了9個鼠標事件：

舉例如下：

只有在同一個元素上相繼除法mousedown和mouseup事件，才會觸發(fā)click事件；只有觸發(fā)兩次click事件，才會觸發(fā)依次dblclick事件。

順序如下：

mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick

IE8之前的版本中有一個bug，在雙擊事件中，會跳過第二個mousedown和click事件

滾輪事件

客戶區(qū)坐標位置clientX和clientY屬性

如：

頁面坐標位置pageX與pageY；

在IE8及更早版本中不支持這個頁面坐標位置，可以計算出來，需要用到混合模式下的document.body和標準模式下的document.documentElement中的scrollLeft和scrollTop屬性：

屏幕坐標位置screenX和screenY；

通過該屬性可以獲得相對于屏幕的坐標。

修改鍵

修改鍵有Shift、Ctrl、Alt、Meta（window上的Windows鍵，蘋果機上的Cmd鍵）；對應(yīng)的修改鍵的狀態(tài)是shiftKey、ctrlKey、altKey、metaKey，這些屬性包含的都是布爾值，如果相應(yīng)的鍵被按下了，則為true，否則為false。如：

相關(guān)元素

event.relatedTarget與event.target；

relatedTarget屬性提供了相關(guān)元素的信息。這個屬性只對于mouseover和mouseout事件才包含值；對于其他事件的值則是null；IE8之前的版本不支持relatedTarget屬性，在mouseover事件觸發(fā)時，IE的fromElement屬性中保存了相關(guān)元素；在mouseout事件觸發(fā)時，IE的toElement屬性中保存著相關(guān)元素。

如：

如：

鼠標按鈕

button屬性

DOM的event.button屬性有三個值：0為主鼠標按鈕、1為中間鼠標按鈕、2為次鼠標按鈕。在常規(guī)設(shè)置中，主鼠標按鈕就是鼠標左鍵；次鼠標按鈕就是鼠標右鍵。

IE8及之前的版本也提供了button屬性，但這個屬性的值與DOM的button屬性有很大差異：

0：沒有按下鼠標按鈕；
1：主鼠標按鈕；
2：次鼠標按鈕；
3：同時按下主鼠標按鈕和次鼠標按鈕；
4：中間鼠標按鈕；
5：同時按下主鼠標按鈕和中間鼠標按鈕；
6：同時按下次鼠標按鈕和中間鼠標按鈕；
7：同時按下三個鼠標按鈕

兼容版：

另外，如果要屏蔽鼠標右鍵，應(yīng)該使用：

這個事件是HTML5定義的，以后再討論

更多的事件信息

detail屬性

對于鼠標事件來說，detail包含了一個數(shù)值，表示在給定位置上發(fā)生了多少次單擊（一次mousedown和一次mouseup），次數(shù)從1開始計數(shù)，如果mousedown和mouseup之間移動了位置，detail會被重置0，如果單擊間隔太長也會被重置為0.

鼠標滾輪事件

mousewheel事件和wheelDelta屬性

在垂直放向上滾動頁面時，就會觸發(fā)mousewheel，event對象里面的wheelDelta屬性則表示當用戶向前滾動滾輪時，wheelDelta是120的倍數(shù)；當向后滾動滾輪時，wheelDelta是-120的倍數(shù)。如：

另外，在Opera 9.5之前的版本中，wheelDelta值的正負號是顛倒的。

此外，F(xiàn)irefox支持一個名為DOMMouseScroll的類似事件，也是在鼠標滾動滾輪時除法。有關(guān)鼠標滾輪的信息保存在detail屬性中。向前滾動這個屬性的值為-3的倍數(shù)，向后滾動，這個屬性的值是3的倍數(shù)。

通用版：

觸摸設(shè)備

iOS和Android設(shè)備中：

不支持dblclick；
輕擊可單擊元素會觸發(fā)mousemove；如果此操作會導致內(nèi)容變化，將不再有其他事件發(fā)聲；如果屏幕沒有發(fā)生變化，那么依次發(fā)生mousedown、mouseup和click事件；
mousemove事件也會觸發(fā)mouseover和mouseout事件；
兩個手指操作會觸發(fā)mousewheel和scroll；

無障礙性問題

使用click事件執(zhí)行代碼；

不要使用onmouseover向用戶顯示新的信息；
不要使用dblclick執(zhí)行重要的操作；

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com