JavaScript事件对象

1 事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包含导致事件的元素，事件的类型以及其他与特定事件相关的信息。所有浏览器都支持event对象，但支持方式不同。

1.1 DOM中的事件对象

兼容DOM的浏览器会讲一个event对象传入到事件处理程序中。无论指定事件处理程序是使用什么方法（DOM0或DOM2级），都会传入event对象。event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。所有事件都会有下表列出的成员：

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

1.2 IE中的事件对象

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

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

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

（2）使用attachEvent()添加事件处理程序，那么就会有一个event对象作为参数被传入事件处理程序函数中。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){
    alert(event.type);    //"click"
});

（3）通过HTML特性指定的事件处理程序，可以通过一个叫event的变量来访问event对象（与DOM中的事件模型相同）。

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

IE的event对象都会包含下列的属性和方法

由于IE不支持事件捕获，因而只能取消事件冒泡。

因为事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为this会始终等于事件目标。 故而最好还是使用event.srcElement比较保险。

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

原因：在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。

1.3 跨浏览器的事件对象

虽然DOM和IE中的event对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。

 <script type="text/javascript">
        var EventUtil = {
          addHandler: function(element, type, handler){
              if (element.addEventListener){
                  element.addEventListener(type, handler, false);
              } else if (element.attachEvent){
                  element.attachEvent("on", type, handler);
              } else {
                  element["on" + 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;
              }
          },

          removeHandler: function (element, type, handler) {
              if (element.removeEventListener){
                  element.removeEventListener(type, handler, false);
              } else if (element.detachEvent){
                  element.detachEvent("on" + type, handler);
              } else {
                  element["on" + type] = null;
              }
          }
        };
        var btn = document.getElementById("btn");
        var handler = function (event) {
            alert("Clicked");
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
            EventUtil.preventDefault(event);
            EventUtil.stopPropagation(event);
        }
        EventUtil.addHandler(btn, "click", handler);
        document.body.onclick = function (event) {
            alert("Body clicked");
        };
    </script>