30-JavaScript高级程序设计-事件对象

一、事件对象

事件对象(event)：包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

1. DOM中的事件对象

兼容 DOM 的浏览器，会将一个 event 对象传入到事件处理程序中。
在通过 HTML 特性指定事件处理程序时，变量 event 中保存着 event 对象。

// DOM0级
btn.onclick = function(event){ 
  alert(event.type); //"click"
};
// DOM2级
btn.addEventListener("click", function(event){
  alert(event.type); //"click" 
}, false);
// HTML特性
<input type="button" value="Click Me" onclick="alert(event.type)"/>

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

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

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

document.body.onclick = function(event){ 
  alert(event.currentTarget === document.body); //true 
  alert(this === document.body); //true 
  alert(event.target === document.getElementById("myBtn")); //true
};

preventDefault()：阻止特定事件的默认行为。例如，链接的默认行为就是在被单击时会导航到其 href 特性指定的 URL。
stopPropagation()：立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。

事件对象的 eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。
如果是在捕获阶段调用的事件处理程序，那么 eventPhase 等于 1；如果事件处理程序处于目标对象上，则 eventPhase 等于 2；如果是在冒泡阶段调用的事件处理程序，eventPhase 等于 3。
注意：尽管“处于目标”发生在冒泡阶段，但 eventPhase 仍然一直等于 2。

btn.onclick = function(event){
  alert(event.eventPhase); //2
};
document.body.addEventListener("click", function(event){
  alert(event.eventPhase); //1
}, true);
document.body.onclick = function(event){
  alert(event.eventPhase); //3
};

只有在事件处理程序执行期间，event 对象才会存在；一旦事件处理程序执行完成，event 对象就会被销毁。

2. IE中的事件对象

访问 IE 中的 event 对象有几种不同的方式，取决于指定事件处理程序的方法。

• 使用 DOM0 级方法添加事件处理程序时，event 对象作为 window 对象的一个属性存在。

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

• 使用 attachEvent() 添加事件处理程序时，有一个 event 对象作为参数被传入事件处理程序函数中。

btn.attachEvent("onclick", function(event){ 
  alert(event.type); //"click"
});

也可以通过 window 对象来访问 event 对象，就像使用 DOM0 级方法时一样。

• 通过 HTML 特性指定的事件处理程序，可以通过一个名叫 event 的变量来访问 event 对象。

<input type="button" value="Click Me" onclick="alert(event.type)">

IE 的 event 对象也包含与创建它的事件相关的属性和方法，这些属性和方法也会因为事件类型的不同而不同。
所有事件对象都会包含的属性和方法：

cancelBubble 默认值为false，设置为true就可以取消事件冒泡 -作用同stopPropagation()
returnValue 默认值为true，设置为false就可以取消事件的默认行为 -作用同preventDefault()
srcElement 事件的目标 -与DOM中的target属性相同
type 被触发的事件的类型

注意：由于 IE 不支持事件捕获，因而只能取消事件冒泡；stopPropagatioin() 可以同时取消事件捕获和冒泡。

事件处理程序的作用域是根据指定它的方式来确定 --> this 不一定等于事件目标 --> 使用 event.srcElement。

btn.onclick = function(){
  alert(window.event.srcElement === this); //true
};
btn.attachEvent("onclick", function(event){
  alert(event.srcElement === this); //false
});

3. 跨浏览器的事件对象

对 EventUtil 对象加以增强。

var EventUtil = {
  addHandler: function(element, type, handler){
    //省略的代码 
  },
  removeHandler: 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;
    }
  },
  stopPropagation: function(event){
    if (event.stopPropagation){
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  }
};

调用：

link.onclick = function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  EventUtil.preventDefault(event);
  EventUtil.stopPropagation(event);
};

---

上一篇：29-JavaScript高级程序设计-事件流&事件处理程序
下一篇：31-JavaScript高级程序设计-事件类型(上)

全书整理版：《Javascript高级程序设计》第3版（总结版）

---