JavaScript事件類型中焦點、鼠標和滾輪事件詳解
本文針對JavaScript 事件中“事件類型”下“焦點、鼠標和滾輪事件”的注意要點進行整理，分享給大家供大家參考，具體內(nèi)容如下
一、焦點事件
一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有：
- blur：元素失去焦點，不會冒泡；
- DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin；
- DOMFocusOut：同HTML事件blur，于DOM3遭廢棄，選用focusout；
- focus：元素獲得焦點，不回冒泡；
- focusin：獲得焦點，與HTML事件focus等價，但會冒泡；
- focusout：失去焦點，與HTML事件blur等價；
如：
window.onfocus = function () {
console.log('focus'); //focus
console.log(document.hasFocus()); //True
}
window.onblur = function () {
console.log('blur'); //blur
console.log(document.hasFocus()); //False
}
當焦點從頁面中的一個元素轉(zhuǎn)移到另一個元素會觸發(fā)下面的事件：
focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn
二、鼠標事件
DOM3級事件中定義了9個鼠標事件：
- click
- dblclick
- mousedown：用戶按下任意鼠標按鈕時觸發(fā)，不能通過鍵盤觸發(fā)這個事件；
- mouseup：用戶釋放鼠標按鈕時觸發(fā)，不能通過鍵盤觸發(fā)這個事件；
- mousemove：不能通過鍵盤觸發(fā)這個事件；
- mouseenter：不冒泡，且光標移動到后代元素上不會觸發(fā)；
- mouseleave：不冒泡，且光標移動到后代元素上不會觸發(fā)；
- mouseover：光標移動到后代元素上會觸發(fā)；
- mouseout：光標移動到后代元素上會觸發(fā)；
舉例如下：
div.onmouseover = function() {
console.log('mouseover'); //在子元素上會觸發(fā)
}
div.onmouseout = function() {
console.log('mouseout'); //在子元素上會觸發(fā)
}
div.onmouseenter = function() {
console.log('mouseenter'); //在子元素上不會觸發(fā)
}
div.onmouseleave = function() {
console.log('mouseleave'); //在子元素上不會觸發(fā)
}
只有在同一個元素上相繼除法mousedown和mouseup事件，才會觸發(fā)click事件；只有觸發(fā)兩次click事件，才會觸發(fā)依次dblclick事件。
順序如下：
mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick
IE8之前的版本中有一個bug，在雙擊事件中，會跳過第二個mousedown和click事件
三、滾輪事件
1、客戶區(qū)坐標位置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鍵）；對應的修改鍵的狀態(tài)是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、相關(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)元素。
如：
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為次鼠標按鈕。在常規(guī)設(shè)置中，主鼠標按鈕就是鼠標左鍵；次鼠標按鈕就是鼠標右鍵。
IE8及之前的版本也提供了button屬性，但這個屬性的值與DOM的button屬性有很大差異：
- 0：沒有按下鼠標按鈕；
- 1：主鼠標按鈕；
- 2：次鼠標按鈕；
- 3：同時按下主鼠標按鈕和次鼠標按鈕；
- 4：中間鼠標按鈕；
- 5：同時按下主鼠標按鈕和中間鼠標按鈕；
- 6：同時按下次鼠標按鈕和中間鼠標按鈕；
- 7：同時按下三個鼠標按鈕
兼容版：
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包含了一個數(shù)值，表示在給定位置上發(fā)生了多少次單擊（一次mousedown和一次mouseup），次數(shù)從1開始計數(shù)，如果mousedown和mouseup之間移動了位置，detail會被重置0，如果單擊間隔太長也會被重置為0.
3、鼠標滾輪事件
mousewheel事件和wheelDelta屬性
在垂直放向上滾動頁面時，就會觸發(fā)mousewheel，event對象里面的wheelDelta屬性則表示當用戶向前滾動滾輪時，wheelDelta是120的倍數(shù)；當向后滾動滾輪時，wheelDelta是-120的倍數(shù)。如：
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值的正負號是顛倒的。
此外，F(xiàn)irefox支持一個名為DOMMouseScroll的類似事件，也是在鼠標滾動滾輪時除法。有關(guān)鼠標滾輪的信息保存在detail屬性中。向前滾動這個屬性的值為-3的倍數(shù)，向后滾動，這個屬性的值是3的倍數(shù)。
通用版：
function getWheelDelta() {
if (event.wheelDelta) {
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
};
}
4、觸摸設(shè)備
iOS和Android設(shè)備中：
- 不支持dblclick；
- 輕擊可單擊元素會觸發(fā)mousemove；如果此操作會導致內(nèi)容變化，將不再有其他事件發(fā)聲；如果屏幕沒有發(fā)生變化，那么依次發(fā)生mousedown、mouseup和click事件；
- mousemove事件也會觸發(fā)mouseover和mouseout事件；
- 兩個手指操作會觸發(fā)mousewheel和scroll；
5、無障礙性問題
- 使用click事件執(zhí)行代碼；
- 不要使用onmouseover向用戶顯示新的信息；
- 不要使用dblclick執(zhí)行重要的操作；
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
相關(guān)文章
JavaScript動態(tài)檢驗密碼強度的實現(xiàn)方法
平時我們會在某些網(wǎng)站的注冊頁面或者更改密碼的頁面發(fā)現(xiàn)當我們輸入密碼時，會有一個類似于進度條的長條進行提示用戶輸入的密碼強度。那么這種效果怎么實現(xiàn)的呢？下面小編給大家介紹下js動態(tài)檢驗密碼強度的實現(xiàn)方法，一起看看吧2016-11-11
不用AI也能實現(xiàn)的文字自動播報(SpeechSynthesis文本實例合成)
SpeechSynthesis是HTML5的一個新特性，基于SpeechSynthesis可以實現(xiàn)在客戶瀏覽器端進行動態(tài)文本的語音合成播放，這篇文章主要介紹了不用AI也能實現(xiàn)的文字自動播報(SpeechSynthesis文本實例合成),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了基于打包工具Webpack進行項目開發(fā)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
javascript中call,apply,bind函數(shù)用法示例
這篇文章主要介紹了javascript中call,apply,bind函數(shù)用法,結(jié)合實例形式分析了call,apply,bind函數(shù)的功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
JavaScript實現(xiàn)獲取最近7天的日期的方法詳解
這篇文章主要想和大家分享一些JavaScript開發(fā)中會用到的小技巧，本文主要介紹了js獲取最近7天的日期，判斷當前日期時間大于指定日期時間等內(nèi)容，需要的可以參考一下2023-04-04
本文主要通過幾個實例對js中作用域進行詳細解析，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
layui實現(xiàn)數(shù)據(jù)表格點擊搜索功能
這篇文章主要為大家詳細介紹了layui實現(xiàn)數(shù)據(jù)表格點擊搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
$.browser.msie 為空或不是對象問題的多種解決方法
因為使用了jquery判斷ie，所以使用了$.browser.msie但是在jquery 1.9以后的版本中不再支持$.browser而使用$.browser來替代2017-03-03
彈出層，并可以拖拽，好多人要，發(fā)出來共享一下 兼容IE6+, 各現(xiàn)代瀏覽器。2011-07-07
一旦你得到了表示窗口的變量，你就能通過各種方法來操縱它。下面介紹一下對窗口的各種操作2013-06-06