事件对象

1.DOM中的事件对象

var btn = document.getElementById("myBtn");

btn.onclick = function(event){

　　alert(event.type); // "click"

};

btn.addEventListener("click", function(event){

　　alert(event.type); // "click"

}, false);

event 对象属性和方法（都是只读的）只有在事件处理程序执行期间，event对象才存在，一旦程序完成，event对象则被销毁

属性/方法　　　　　　类型　　　　　　说明

bubbles　　　　　　boolean　　　　　表明事件是否冒泡

cancelable　　　　   boolean　　　　　表明是否可以取消事件的默认行为

currentTarget　　　　Element　　　　  其事件处理程序当前正在处理事件的那个元素

defaultPrevented　　 boolean　　　　　为true表示已经调用了preventDefault()（DOM3级中事件新增）

detail　　　　　　　  Integer　　　　　 与事件相关的细节信息

eventPhase　　　　  Integer　　　　　  调用事件处理的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段

preventDefault()          Function　　　　　取消事件的默认行为。如果cancelable是true，则可以使用这个方法

stopPropagation()       Function　　　　　取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用

target　　　　　　　 Element　　　　　 事件的目标

type　　　　　　　    String　　　　　　 被触发事件的类型

 

在事件处理程序内部，对象this始终等于currentTarget的值，而target只包含事件的实际目标，如果直接将事件处理程序指定给了目标元素，则this，currentTarget，target包含相同的值

var btn = document.getElementById("myBtn");

btn.onclick = function(event){

　　alert(event.currentTarget === this); // true

　　alert(event.target === this); // true

}

再看下面的例子：如果事件处理程序存在于按钮的父节点中，那么这些值是不相同的

document.body.onclick = function(event) {

　　alert(event.currentTarget === document.body); // true

　　alert(this === document.body); // true

　　alert(event.target === document.getElementById("myBtn")); // true

}

当单击这个例子中的按钮时，this和currentTarget都等于document.body，因为事件处理程序是注册到这个元素上的，

而target却等于按钮元素，因为它是click事件真正的目标，由于按钮并没有注册事件处理程序，它冒泡到了document.body上

要阻止事件的默认行为，可以使用preventDefault()方法。例如，链接的默认行为就是在被点击时会导航到href特性指定的URL

如果想阻止该行为，则通过链接的onclick事件处理程序可以取消它

另外，stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的捕获或者冒泡

例如：直接添加到一个按钮的事件处理程序可以调用stopPropagation()，从而避免触发注册在document.body上面的事件处理程序

 

2.IE中的事件处理对象

在IE中访问event， 都可以通过window.event来访问

IE中事件对象属性和方法

cancelBubble　　　　Boolean    读/写　　默认为false，设置成true可以取消事件冒泡

returnValue　　　　　Boolean　读/写　　默认为true，但设置成false可以取消事件默认行为

srcElement　　　　　Element    只读　　 事件的目标（与DOM中target属性一样）

type　　　　　　　　String        只读　　 被触发事件的类型

 

IE中不支持事件捕获