JavaScript焦點(diǎn)事件、鼠標(biāo)事件和滾輪事件使用詳解
焦點(diǎn)事件
一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有：
blur：元素失去焦點(diǎn)，不會(huì)冒泡；
DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin；
DOMFocusOut：同HTML事件blur，于DOM3遭廢棄，選用focusout；
focus：元素獲得焦點(diǎn)，不回冒泡；
focusin：獲得焦點(diǎn)，與HTML事件focus等價(jià)，但會(huì)冒泡；
focusout：失去焦點(diǎn)，與HTML事件blur等價(jià)；
如：
window.onfocus = function () {
console.log('focus'); //focus
console.log(document.hasFocus()); //True
}
window.onblur = function () {
console.log('blur'); //blur
console.log(document.hasFocus()); //False
}
當(dāng)焦點(diǎn)從頁面中的一個(gè)元素轉(zhuǎn)移到另一個(gè)元素會(huì)觸發(fā)下面的事件：
focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn
鼠標(biāo)事件
DOM3級(jí)事件中定義了9個(gè)鼠標(biāo)事件：
click dblclick mousedown：用戶按下任意鼠標(biāo)按鈕時(shí)觸發(fā)，不能通過鍵盤觸發(fā)這個(gè)事件； mouseup：用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)，不能通過鍵盤觸發(fā)這個(gè)事件； mousemove：不能通過鍵盤觸發(fā)這個(gè)事件； mouseenter：不冒泡，且光標(biāo)移動(dòng)到后代元素上不會(huì)觸發(fā)； mouseleave：不冒泡，且光標(biāo)移動(dòng)到后代元素上不會(huì)觸發(fā)； mouseover：光標(biāo)移動(dòng)到后代元素上會(huì)觸發(fā)； mouseout：光標(biāo)移動(dòng)到后代元素上會(huì)觸發(fā)；
舉例如下：
div.onmouseover = function() {
console.log('mouseover'); //在子元素上會(huì)觸發(fā)
}
div.onmouseout = function() {
console.log('mouseout'); //在子元素上會(huì)觸發(fā)
}
div.onmouseenter = function() {
console.log('mouseenter'); //在子元素上不會(huì)觸發(fā)
}
div.onmouseleave = function() {
console.log('mouseleave'); //在子元素上不會(huì)觸發(fā)
}
只有在同一個(gè)元素上相繼除法mousedown和mouseup事件，才會(huì)觸發(fā)click事件；只有觸發(fā)兩次click事件，才會(huì)觸發(fā)依次dblclick事件。
順序如下：
mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick
IE8之前的版本中有一個(gè)bug，在雙擊事件中，會(huì)跳過第二個(gè)mousedown和click事件
滾輪事件
客戶區(qū)坐標(biāo)位置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);
};
頁面坐標(biāo)位置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及更早版本中不支持這個(gè)頁面坐標(biāo)位置，可以計(jì)算出來，需要用到混合模式下的document.body和標(biāo)準(zhǔn)模式下的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);
};
屏幕坐標(biāo)位置screenX和screenY；
通過該屬性可以獲得相對(duì)于屏幕的坐標(biāo)。
修改鍵
修改鍵有Shift、Ctrl、Alt、Meta（window上的Windows鍵，蘋果機(jī)上的Cmd鍵）；對(duì)應(yīng)的修改鍵的狀態(tài)是shiftKey、ctrlKey、altKey、metaKey，這些屬性包含的都是布爾值，如果相應(yīng)的鍵被按下了，則為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);
}
相關(guān)元素
event.relatedTarget與event.target；
relatedTarget屬性提供了相關(guān)元素的信息。這個(gè)屬性只對(duì)于mouseover和mouseout事件才包含值；對(duì)于其他事件的值則是null；IE8之前的版本不支持relatedTarget屬性，在mouseover事件觸發(fā)時(shí)，IE的fromElement屬性中保存了相關(guān)元素；在mouseout事件觸發(fā)時(shí)，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;
}
}
鼠標(biāo)按鈕
button屬性
DOM的event.button屬性有三個(gè)值：0為主鼠標(biāo)按鈕、1為中間鼠標(biāo)按鈕、2為次鼠標(biāo)按鈕。在常規(guī)設(shè)置中，主鼠標(biāo)按鈕就是鼠標(biāo)左鍵；次鼠標(biāo)按鈕就是鼠標(biāo)右鍵。
IE8及之前的版本也提供了button屬性，但這個(gè)屬性的值與DOM的button屬性有很大差異：
0：沒有按下鼠標(biāo)按鈕；
1：主鼠標(biāo)按鈕；
2：次鼠標(biāo)按鈕；
3：同時(shí)按下主鼠標(biāo)按鈕和次鼠標(biāo)按鈕；
4：中間鼠標(biāo)按鈕；
5：同時(shí)按下主鼠標(biāo)按鈕和中間鼠標(biāo)按鈕；
6：同時(shí)按下次鼠標(biāo)按鈕和中間鼠標(biāo)按鈕；
7：同時(shí)按下三個(gè)鼠標(biāo)按鈕
兼容版：
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;
}
}
}
另外，如果要屏蔽鼠標(biāo)右鍵，應(yīng)該使用：
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;
}
這個(gè)事件是HTML5定義的，以后再討論
更多的事件信息
detail屬性
對(duì)于鼠標(biāo)事件來說，detail包含了一個(gè)數(shù)值，表示在給定位置上發(fā)生了多少次單擊（一次mousedown和一次mouseup），次數(shù)從1開始計(jì)數(shù)，如果mousedown和mouseup之間移動(dòng)了位置，detail會(huì)被重置0，如果單擊間隔太長也會(huì)被重置為0.
鼠標(biāo)滾輪事件
mousewheel事件和wheelDelta屬性
在垂直放向上滾動(dòng)頁面時(shí)，就會(huì)觸發(fā)mousewheel，event對(duì)象里面的wheelDelta屬性則表示當(dāng)用戶向前滾動(dòng)滾輪時(shí)，wheelDelta是120的倍數(shù)；當(dāng)向后滾動(dòng)滾輪時(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ù)號(hào)是顛倒的。
此外，F(xiàn)irefox支持一個(gè)名為DOMMouseScroll的類似事件，也是在鼠標(biāo)滾動(dòng)滾輪時(shí)除法。有關(guān)鼠標(biāo)滾輪的信息保存在detail屬性中。向前滾動(dòng)這個(gè)屬性的值為-3的倍數(shù)，向后滾動(dòng)，這個(gè)屬性的值是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;
};
}
觸摸設(shè)備
iOS和Android設(shè)備中：
不支持dblclick；
輕擊可單擊元素會(huì)觸發(fā)mousemove；如果此操作會(huì)導(dǎo)致內(nèi)容變化，將不再有其他事件發(fā)聲；如果屏幕沒有發(fā)生變化，那么依次發(fā)生mousedown、mouseup和click事件；
mousemove事件也會(huì)觸發(fā)mouseover和mouseout事件；
兩個(gè)手指操作會(huì)觸發(fā)mousewheel和scroll；
無障礙性問題
使用click事件執(zhí)行代碼；
不要使用onmouseover向用戶顯示新的信息；
不要使用dblclick執(zhí)行重要的操作；
- JS鼠標(biāo)事件大全 推薦收藏
- javascript 鼠標(biāo)事件總結(jié)
- js控制鼠標(biāo)事件移動(dòng)及移出效果顯示
- JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡單實(shí)例
- js監(jiān)聽鼠標(biāo)事件控制textarea輸入字符串的個(gè)數(shù)
- javascript簡單拖拽實(shí)現(xiàn)代碼(鼠標(biāo)事件 mousedown mousemove mouseup)
- js 綁定鍵盤鼠標(biāo)事件示例代碼
- js動(dòng)態(tài)設(shè)置鼠標(biāo)事件示例代碼
- javascript 不讓鼠標(biāo)事件觸發(fā)
- 關(guān)于js中的鼠標(biāo)事件總結(jié)
- JavaScript常見鼠標(biāo)事件與用法分析
相關(guān)文章
微信小程序自定義tabbar欄實(shí)現(xiàn)過程講解
tabBar相對(duì)而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Javascript 鏈?zhǔn)阶饔糜蛟敿?xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS中捕獲console.log()輸出的方法,實(shí)例分析了實(shí)現(xiàn)獲取console.log輸出的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-10-10
artDialog+plupload實(shí)現(xiàn)多文件上傳
這篇文章主要介紹了artDialog+plupload實(shí)現(xiàn)多文件上傳的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
在本篇文章中小編給大家整理了一篇關(guān)于a標(biāo)簽調(diào)用js的幾種方法的相關(guān)內(nèi)容，有此需要的朋友們可以參考下。2019-09-09
js特效,頁面下雪的小例子，需要的朋友可以參考一下2013-06-06
viewer.js一個(gè)強(qiáng)大的基于jQuery的圖像查看插件(支持旋轉(zhuǎn)、縮放)
這篇文章主要介紹了Viewer這一款強(qiáng)大的 jQuery 圖像瀏覽插件,在信息詳情頁面實(shí)現(xiàn)點(diǎn)擊圖片可以預(yù)覽,腳本之家也是用的這個(gè)js，這里為分享一下使用方法，需要的朋友可以參考下2020-04-04
JavaScript實(shí)現(xiàn)下載超大文件的方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)下載超大文件的相關(guān)方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
typescript環(huán)境安裝并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件
這篇文章主要介紹了安裝typescript環(huán)境并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件,本文教大家最基礎(chǔ)的安裝和配置自動(dòng)監(jiān)視ts文件編譯成js文件，需要的朋友可以參考下2022-06-06