摘要：焦點(diǎn)事件一般利用這些事件與方法和屬性配合。此外，支持一個(gè)名為的類似事件，也是在鼠標(biāo)滾動(dòng)滾輪時(shí)除法。

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

blur：元素失去焦點(diǎn)，不會冒泡；

DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin；

DOMFocusOut：同HTML事件blur，于DOM3遭廢棄，選用focusout；

focus：元素獲得焦點(diǎn)，不回冒泡；

focusin：獲得焦點(diǎn)，與HTML事件focus等價(jià)，但會冒泡；

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è)元素會觸發(fā)下面的事件：

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

DOM3級事件中定義了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)到后代元素上不會觸發(fā)；

mouseleave：不冒泡，且光標(biāo)移動(dòng)到后代元素上不會觸發(fā)；

mouseover：光標(biāo)移動(dòng)到后代元素上會觸發(fā)；

mouseout：光標(biāo)移動(dòng)到后代元素上會觸發(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ā)
}

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

順序如下：

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

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

如：

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);
};

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)。

修改鍵有Shift、Ctrl、Alt、Meta（window上的Windows鍵，蘋果機(jī)上的Cmd鍵）；對應(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);
}

relatedTarget屬性提供了相關(guān)元素的信息。這個(gè)屬性只對于mouseover和mouseout事件才包含值；對于其他事件的值則是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;
    }
}

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定義的，以后再討論

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

在垂直放向上滾動(dòng)頁面時(shí)，就會觸發(fā)mousewheel，event對象里面的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ù)號是顛倒的。

此外，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;
    };
}

iOS和Android設(shè)備中：

不支持dblclick；

輕擊可單擊元素會觸發(fā)mousemove；如果此操作會導(dǎo)致內(nèi)容變化，將不再有其他事件發(fā)聲；如果屏幕沒有發(fā)生變化，那么依次發(fā)生mousedown、mouseup和click事件；

mousemove事件也會觸發(fā)mouseover和mouseout事件；

兩個(gè)手指操作會觸發(fā)mousewheel和scroll；

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

不要使用onmouseover向用戶顯示新的信息；

不要使用dblclick執(zhí)行重要的操作；