JavaScript事件类型：鼠标事件之Event的属性：其他属性

1、button属性

mousedown和mouseup事件的event对象中存在一个button属性，表示按下或释放的按钮。Dom的button属性有三个值：0表示主鼠标按钮（鼠标左键），1表示滚轮按钮，2表示次鼠标按钮（鼠标右键）。
IE8及之前版本也提供了button属性，但这个属性的值与Dom的button属性有很大差异，常见的做法是将IE模型规范化为Dom方式。

代码如下：

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },
    getEvent:function(event){ 
        return event?event:window.event;
    },
    getButton:function(event){
        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;               
            }
        }
    }
}

// 调用方法getButton()
EventUtil.addHandler(document,'mousedown',function(event){
    event=EventUtil.getEvent(event);
    alert(EventUtil.getButton(event));
})

*document.implementation的hasFeature()方法用来检测浏览器是否支持Dom版鼠标事件。

2、修改键

修改键包括Shift、Ctrl、Alt和Meta（Windows键盘中是Windows键，苹果机中是Cmd键），它们被用来修改鼠标事件的行为。
Dom为此规定了4个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey和metaKey。这些属性返回布尔值。相应的键被按下，返回true。

例子：

<button id='myBtn'>
    OK
</button>

var btn=document.getElementById('myBtn')
btn.onmousedown=function(event){
    if (event.shiftKey){
        alert("shift")
    }
    if (event.ctrlKey){
        alert("ctrl")
    }
    if (event.altKey){
        alert("alt")
    }
    if (event.metaKey){
        alert("meta")
    }
}

３、relatedTarget属性

在mouseover事件中，该属性的值是鼠标光标移到目标节点上时所离开的那个节点。
在mouseout事件中，该属性的值是离开目标时鼠标光标进入的节点。
对于其他事件，这个属性的值是null。

测试代码：

<div style='width:60px;height:60px;background:red;'>
</div>

var Div=document.getElementsByTagName('div')[0]
Div.addEventListener('mouseover',function(event){
    alert(event.relatedTarget.nodeName)
})
//输出：BODY或HTML

IE8及之前版本也提供了类似的属性，在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件触发时，IE的toElement属性中保存了相关元素。下面是跨浏览器的方案。

代码如下：

<div style='width:60px;height:60px;background:red;'>
</div>

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },
    getEvent:function(event){ 
        return event?event:window.event;
    },
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    getRelatedTarget:function(event){
        if(event.relatedTarget){
            return event.relatedTarget;
        }else if(event.fromElement){
            return event.fromElement;
        }else if(event.toElement){
            return event.toElement;
        }else{
            return null;
        }
    }
}

//调用方法getRelatedTarget()
var Div=document.getElementsByTagName('div')[0]
EventUtil.addHandler(Div,'mouseover',function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    var relatedTarget=EventUtil.getRelatedTarget(event);
    alert('Mouse: from '+relatedTarget.nodeName+' to '+target.nodeName);
})
//输出：Mouse: from BODY（或HTML） to DIV

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。