本文針對JavaScript 事件中“事件類型”下“焦點、鼠標和滾輪事件”的注意要點進行整理,分享給大家供大家參考,具體內容如下
一、焦點事件
一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有:
如:
window.onfocus = function () { console.log('focus'); //focus console.log(document.hasFocus()); //True } window.onblur = function () { console.log('blur'); //blur console.log(document.hasFocus()); //False }
當焦點從頁面中的一個元素轉移到另一個元素會觸發下面的事件:
focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn
二、鼠標事件
DOM3級事件中定義了9個鼠標事件:
舉例如下:
div.onmouseover = function() { console.log('mouseover'); //在子元素上會觸發 } div.onmouseout = function() { console.log('mouseout'); //在子元素上會觸發 } div.onmouseenter = function() { console.log('mouseenter'); //在子元素上不會觸發 } div.onmouseleave = function() { console.log('mouseleave'); //在子元素上不會觸發 }
只有在同一個元素上相繼除法mousedown和mouseup事件,才會觸發click事件;只有觸發兩次click事件,才會觸發依次dblclick事件。
順序如下:
mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick
IE8之前的版本中有一個bug,在雙擊事件中,會跳過第二個mousedown和click事件
三、滾輪事件
1、客戶區坐標位置clientX和clientY屬性
如:
window.onmousemove = function() { clickX = event.clientX; clickY = event.clientY; var div = document.createElement("img"); div.src = "hhh.gif" div.style.position = "absolute"; div.style.width = '100px'; div.style.left = clickX + "px"; div.style.top = clickY + "px"; document.body.appendChild(div); };
2、頁面坐標位置pageX與pageY;
window.onclick = function() { clickX = event.pageX; clickY = event.pageY; var div = document.createElement("img"); div.src = "ppp.png" div.style.position = "absolute"; div.style.width = '100px'; div.style.left = clickX + "px"; div.style.top = clickY + "px"; document.body.appendChild(div); };
在IE8及更早版本中不支持這個頁面坐標位置,可以計算出來,需要用到混合模式下的document.body和標准模式下的document.documentElement中的scrollLeft和scrollTop屬性:
if (clickX === undefined) { clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); }; if (clickY === undefined) { clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); };
3、屏幕坐標位置screenX和screenY;
通過該屬性可以獲得相對於屏幕的坐標。
4、修改鍵
修改鍵有Shift、Ctrl、Alt、Meta(window上的Windows鍵,蘋果機上的Cmd鍵);對應的修改鍵的狀態是shiftKey、ctrlKey、altKey、metaKey,這些屬性包含的都是布爾值,如果相應的鍵被按下了,則為true,否則為false。如:
var array = []; var timing = setTimeout(showArray, 100); window.onclick = function() { if (event.shiftKey) { array.push("shift"); }; if (event.ctrlKey) { array.push("ctrl"); }; if (event.altKey) { array.push("alt"); }; if (event.metaKey) { array.push("meta"); }; }; function showArray() { var str = array.toString(); var newP = document.createElement("p"); newP.appendChild(document.createTextNode(str)); document.body.appendChild(newP); timing = setTimeout(showArray, 1000); }
5、相關元素
event.relatedTarget與event.target;
relatedTarget屬性提供了相關元素的信息。這個屬性只對於mouseover和mouseout事件才包含值;對於其他事件的值則是null;IE8之前的版本不支持relatedTarget屬性,在mouseover事件觸發時,IE的fromElement屬性中保存了相關元素;在mouseout事件觸發時,IE的toElement屬性中保存著相關元素。
如:
var dot = document.getElementById("dot"); dot.onmouseout = function (){ console.log("mouse out from" + event.target.tagName + "to" + event.relatedTarget.tagName); };
如:
function getRelatedTarget() { if (event.ralatedTarget) { return event.relatedTarget; } else if (event.toElement) { return event.toElement; } else if (event.fromElement) { return event.fromElement; } else { return null; } }
四、鼠標按鈕
1、button屬性
DOM的event.button屬性有三個值:0為主鼠標按鈕、1為中間鼠標按鈕、2為次鼠標按鈕。在常規設置中,主鼠標按鈕就是鼠標左鍵;次鼠標按鈕就是鼠標右鍵。
IE8及之前的版本也提供了button屬性,但這個屬性的值與DOM的button屬性有很大差異:
兼容版:
function getButton() { if (document.implementation.hasFeature("MouseEvents", "2.0")) { return event.button; } else { switch (event.button) { case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }
另外,如果要屏蔽鼠標右鍵,應該使用:
document.oncontextmenu = function(event) { // if (window.event) { // event = window.event; // } // try { // var the = event.srcElement; // if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { // return false; // } // return true; // } catch (e) { // return false; // } return false; }
這個事件是HTML5定義的,以後再討論
2、更多的事件信息
detail屬性
對於鼠標事件來說,detail包含了一個數值,表示在給定位置上發生了多少次單擊(一次mousedown和一次mouseup),次數從1開始計數,如果mousedown和mouseup之間移動了位置,detail會被重置0,如果單擊間隔太長也會被重置為0.
3、鼠標滾輪事件
mousewheel事件和wheelDelta屬性
在垂直放向上滾動頁面時,就會觸發mousewheel,event對象裡面的wheelDelta屬性則表示當用戶向前滾動滾輪時,wheelDelta是120的倍數;當向後滾動滾輪時,wheelDelta是-120的倍數。如:
var clientHeight = document.documentElement.clientHeight; var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { divs[i].style.height = clientHeight + "px"; }; window.onmousewheel = function () { if (event.wheelDelta <= -120) { window.scrollBy(0,clientHeight); }else if(event.wheelDelta >= 120){ window.scrollBy(0,-clientHeight); }; }
另外,在Opera 9.5之前的版本中,wheelDelta值的正負號是顛倒的。
此外,Firefox支持一個名為DOMMouseScroll的類似事件,也是在鼠標滾動滾輪時除法。有關鼠標滾輪的信息保存在detail屬性中。向前滾動這個屬性的值為-3的倍數,向後滾動,這個屬性的值是3的倍數。
通用版:
function getWheelDelta() { if (event.wheelDelta) { return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); } else { return -event.detail * 40; }; }
4、觸摸設備
iOS和Android設備中:
5、無障礙性問題
以上就是本文的全部內容,希望對大家的學習有所幫助。