事件（二）

事件对象

在DOM上触发某个事件时，会产生一个事件对象event，这个对象包含着所有与事件相关的信息。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入事件处理程序中：（以DOM2级为例）

btn.addEventListener("click",function(event){
  alert(event.type);
},false);

以上例子会在点击时打印出被触发事件的类型，基本上所有的事件都会有以下成员：

• 属性 —— 类型 —— 读/写 —— 说明

• bubbles —— Boolean —— 只读 —— 表明事件是否冒泡

• cancelable —— Boolean —— 只读 —— 表明是否可以取消事件的默认行为

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

• defaultPrevented —— Boolean —— 只读 —— true时表示已经调用了preventDefault()（DOM3级事件中新增方法）

• detail —— Integer —— 只读 —— 与事件相关的细节信息

• eventPhase —— Integer —— 只读 —— 调用处理程序的阶段：1：捕获阶段，2：处于目标阶段，3：冒泡阶段

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

• stopImmediatePropagation —— Function —— 只读 —— 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）

• stopPropagation —— Function —— 只读 —— 取消事件的进一步捕获或冒泡。如果bubbles为true，可以使用这个方法

• target —— Element —— 只读事件的目标

• trusted —— Boolean —— 只读 —— true表示事件是浏览器生成的；false表示事件是由开发人员创建的（DOM3级新增）

• type —— String —— 只读 —— 被触发事件类型

• view —— AbstractView —— 只读与事件关联的抽象视图。等同于发生事件的window对象

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标，也就是说this和currentTarget指向的是注册事件处理程序的元素上，而target则是实际执行事件处理程序的元素。你可以用以下例子通过点击不同元素来查看是否是这样：

document.body.onclick = function(event){
  alert(event.currentTarget === document.body);
  alert(this === document.body);
  alert(event.target === document.body);
}

如果用以上代码的形式来注册事件，根据事件的流程可以知道，事件处理程序将会在冒泡阶段到达document.body时，事件才会得到处理。
eventPhase的三个状态还是比较明确的，虽然“处于目标”发生在冒泡阶段，但是eventPhase仍然一直等于2，简单来说，就是事件处理程序绑定的元素就是目标元素时，eventPhase的值为2.
注：event对象只有在事件处理程序执行期间存在。

IE中的事件对象

访问IE中的event对象有几种不同的方式：
在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在：

btn.onclick = function(){
  var event = window.event;
  alert(event.type);
}

使用attachEvent()，event会作为一个对象参数传入事件处理程序，但也可以通过window对象来访问event对象。
如果直接通过HTML特性指定的事件处理程序，则可以通过一个event变量来访问event对象。
IE中event的属性在这里只做简单的介绍：

• srcElement —— Element —— 只读 —— 事件的目标(与DOM中的target属性相同)
• type —— String —— 只读 —— 被触发的事件类型
• returnValue —— Boolean —— 读/写 —— false时取消事件的默认行为(与DOM中的preventDefault()方法作用相同)
• cancelBubble —— Boolean —— 读/写 —— true时取消事件冒泡(与DOM中的stopPropagation方法作用相同)

注:
与DOM不同的是，returnValue无法确定事件是否能被取消；
由于IE不支持事件捕获，cancelBubble只能取消事件冒泡，而stopPropagation能取消事件捕获和冒泡。