Javascript 事件对象 （DOM && IE）

关键词：DOM事件对象的属性   IE事件对象的属性   　跨浏览器的事件对象解决方案

在触发DOM上的某个事件时，会产生一个事件对象event, 这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型，以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持event对象，但支持方式不同。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0级或DOM2级），都会传入event对象。

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都会有下表列出的成员。

特征/方法	类型	可读/可写	描述
altKey	Boolean	R/W	true表示按下ALT键，false表示没有
bubbles	Boolean	R	表示事件是否正在冒泡阶段中
button	Integer	R/W	对于特定的鼠标事件，表示按下的鼠标按钮： 0——未按下按钮 1——按下左键 2——按下右键 3——同时按下左右按钮 4——按下中键 5——按下左键和中键 6——按下右键和中键 7——同时按下左中右键
cancelable	Boolean	R	表示事件能否取消
cancelBubble	Boolean	R	表示事件冒泡是否已被取消
charCode	Boolean	R	按下的按键的Unicode值
ClientX	Integer	R	事件发生时，鼠标在客户端区域的（不包含工具栏、滚动条等）的X坐标
ClientY	Integer	R	事件发生时，鼠标在客户端区域（不包含工具栏、滚动条等）的Y坐标
ctrlKey	Boolean	R	true表示按下的CTRL键，false表示没有
currentTarget	Element	R/W	事件目前所指向的元素
detail	Integer	R	鼠标按钮点击的次数
eventPhase	Integer	R	事件的阶段，可能是以下的值中的一个： 0——捕获阶段 1——在目标上 2——冒泡阶段
isChar	Boolean	R	表示按下的的按键是否有字符与之相关
keyCode	Integer	R/W	表示按下按钮的数字代号
metaKey	Integer	R/W	表示META键是否被按下
pageX	Integer	R	鼠标相对于页面的X坐标
pageY	Integer	R	鼠标相对于页面的Y坐标
preventDefault	Function	N/A	可以调用这个方法来阻止事件的默认行为
relatedTarget	Element	R	事件的第二目标，经常用于鼠标事件
screenX	Integer	R	相对于整个计算机屏幕的鼠标x坐标
screenY	Integer	R	相对于整个计算机屏幕的鼠标y坐标
shiftKey	Boolean	R	true表示按下shift键，否则为false
stopPropagation()	Function	N/A	可调用这个方法阻止将来事件的冒泡
target	Element	R	引起事件的元素/对象
timestamp	Long	R	事件发生的时候，从1970年1月1日0：00起的毫秒数
type	String	R	事件的名称

IE事件对象

与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

如：

var btn = document.getElementById("myBtn");
btn.onclick = function(){
      var event = window.event;
      alert(event.type);
}

IE 的event对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的或者相关的DOM属性和方法。与DOM的event对象一样，这些属性和方法也会因为事件类型的不同而不同，但所有事件对象都会包含死皮赖脸所列的属性和方法。

特征/方法	类型	可读/可写	描述
altKey	Boolean	R/W	true表示按下ALT键，false表示没有
button	Interger	R/W	对于特定的鼠标事件，表示按下的鼠标按钮： 0——未按下按钮 1——按下左键 2——按下右键 3——同时按下左右按钮 4——按下中键 5——按下左键和中键 6——按下右键和中键 7——同时按下左中右键
cancelBubble	Boolean	R/W	开发人员将其设为true时，将会停止事件向个冒泡
ClientX	Integer	R/W	事件发生时，鼠标在客户端区域的（不包含工具栏、滚动条等）的X坐标
ClientY	Integer	R/W	事件发生时，鼠标在客户端区域（不包含工具栏、滚动条等）的Y坐标
ctrlKey	Boolean	R/W	true表示按下的CTRL键，false表示没有
fromElement	Element	R/W	某些鼠标事件中，鼠标所离开的元素
keyCode	Integer	R/W	对于keypress事件，表示按钮的Unicode字符；对于keydown/keyup事件，表示按下按钮的数字代号
offsetX	Integer	R/W	鼠标相对于引起事件的对象的X坐标
offsetY	Integer	R/W	鼠标相对于引起事件的对象的Y坐标
repeat	Boolean	R/W	如果不断触发keydown事件，则为true，否则为false
returnValue	Boolean	R/W	开发人员将其设置为false以取消事件的默认动作
screenX	Integer	R/W	相对于整个计算机屏幕的鼠标x坐标
screenY	Integer	R/W	相对于整个计算机屏幕的鼠标y坐标
shiftKey	Boolean	R/W	true表示按下shift键，否则为false
srcElement	Element	R	引起事件的元素
toElement	Element	R/W	在鼠标事件中，鼠标正在进入的元素
type	String	R	事件的名称
x	Integer	R/W	鼠标相对于引起事件的元素的父元素的x坐标
y	Integer	R/W	鼠标相对于引起事件的元素的父元素的y坐标

跨浏览器的事件对象

虽然DOM和IE中的event对象不同，但基于它们之间的依旧可以拿出跨浏览器的方案来。IE中event对象的全部信息和方法DOM对象中都有，只不过实现方式不一样。如，DOM中取消事件冒泡的属性为stopPropagation, IE中对应的为cancelBubble; DOM中取消事件的默认行为的属性为preventDefault, IE中对应的为returnValue; DOM中获取事件目标的方法为event.target, IE 中对应的为event.srcElement.不过，这种对应关系让实现两种事件模型之间的映射非常容易。

var EventUtil = {
    
//获取事件对象
    getEvent: function(event){
        return event ? event : window.event;
    },
    
//获取事件目标
    getTarget: function(event){
        return event.target || event.srcElement;
    },

//取消默认行为        
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

//取消事件冒泡    
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

使用时首先调用EventUtil中的getEvent获取事件对象，再调用相应方法即可。