JavaScript中的事件对象

JavaScript中的事件对象

注：本文所有代码测试结果均基于Google浏览器。

1、事件对象

一般称为event对象，这个对象在兼容DOM的浏览器中是表示浏览器通过函数把这个对象当成参数传递过来的。

例如：

document.onclick = function(){        alert(arguments.length); //结果显示：1        alert(arguments); //Google浏览器：object arguments    };

事件对象的产生

在触发DOM上的某个事件时，就会产生事件对象，这个事件对象包含着所有与事件有关的信息，包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

如果事件处理函数绑定了函数，浏览器会默认传递一个参数，这个参数就是event对象。

但是在IE浏览器中，event参数是未定义的（undefined），因此返回的是window.event。

所有浏览器器都支持event对象，但是支持的方式是不同的。W3C可以直接接受event对象，但是IE不支持。

2、IE中的event对象

包含的属性和方法：

cancelBubble ，Boolean类型，将其设置成true时就可以取消事件冒泡，与DOM中的stopPropagation()方法的作用相同。returnValue ，Boolean类型，默认值为true,将其设置成false时就可以取消事件默认行为，与DOM中的preventDefault()方法的作用相同。srcElement ，表示事件的目标。type ，表示被触发的事件的类型。

3、DOM中event对象

包含的属性和方法：

bubbles ，Boolean类型，表示事件是否冒泡。cancelable ,Boolean类型，表示是否可以取消事件的默认行为。currentTarget ，表示其事件处理程序当前正处于事件的那个元素。defaultPrevented ，Boolean类型，为true时表示已经调用了preventDefault（），是DOM3级事件中新增的。detail ，表示与事件有关的细节信息。eventPhase ，表示调用事件处理程序的阶段：1.捕获阶段 2.处于目标阶段  3.冒泡阶段preventDefault() ,表示取消事件的默认行为，如果cancelable是true则可以使用这个方法。stopImmediatePropagation() ，表示取消事件的进一步冒泡或捕获，同时阻止任何事件处理程序被调用，是DOM3级事件中新增的。stopPropagation() ，表示立即停止事件在DOM层次中传播，即取消事件的进一步冒泡或捕获，如果bubbles是true则可以使用这个方法。target ，表示事件的目标。trusted ，为true表示事件是浏览器生成的，为false表示事件是由开发人员通过JavaScript创建的，是DOM3级事件中新增的。type ，表示触发的事件类型。view ，表示与事件关联的抽象视图，等同于发生事件的window对象。

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。

例：

<div id="myBtn">hello</div>

例1：

var btn=document.getElementById('myBtn');    btn.onclick=function(event){        var e = event || window.event;        alert(e.currentTarget === this); //结果：true        alert(e.target === this); //结果：true    }

例2：

document.body.onclick = function(){        var e = event || window.event;        alert("事件类型："+e.type+" ，事件详细信息："+e.detail); //结果：事件类型：click ， 事件详细信息：1        alert(e.currentTarget === document.body); //结果：true        alert(this === document.body); //结果：true        alert(e.eventPhase); //结果：3 （事件冒泡阶段）        alert("事件类型："+e.type+" ，事件目标："+e.target); //结果;事件类型：click ,事件目标：[object HTMLDivElement]        alert(e.target === document.getElementById("myBtn")); //结果：true    }

说明：
在这个例子中，this和currenttarget都等于document.body，因为事件处理程序是注册到这个元素上的，而target元素则等于按钮元素，因为它是click事件的真正目标，由于按钮上没有事件处理程序，结果就冒泡了document.body才得到处理。

3、实现跨浏览器兼容使用event对象

简例：

document.onclick = function(evt){        var e = evt|| window.event;        alert(e);    };

详例：

var eventUntil ={        addHandler:function(element,type,handler){ },        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; }        },        removeHandler: function(element,type,handler){ },        stopPropagation: function(event){            if(event.stopPropagation){ event.stopPropagation(); }            else{ event.cancelBubble = true; }        }    };    var btn=document.getElementById('myBtn');    btn.onclick=function(event){        event = eventUntil.getEvemt(event); //事件对象的位置        var target = eventUntil.getTarget(event); //事件对象的类型    }

本文参考：《JavaScript高级编程》第三版