事件（二）：事件对象

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

DOM中的事件对象

兼容DOM的浏览器会将event对象传入事件处理程序中去。无论指定事件处理程序时使用什么方法（DOM0级或者DOM2级），都会传入event对象。

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

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。
在事件处理程序内部，对象this始终等于currentTarget的值，而target属性只包含事件的实际目标，例如：click事件的目标就是button。如果直接将时间处理程序给了目标元素，则this，currentTarget和Target包含相同的值。
我们可以通过type属性，通过一个函数处理多个事件：

window.onload = function(){
          var btn = document.getElementById("mybutton");
          console.log(btn);
          var handler = function(event){
            switch(event.type){
                case "click": alert("Clicked");
                break;

                case "mouseover":
                event.target.style.backgroundColor = "red";
                break;

                case "mouseout":
                event.target.style.background = "";
                break;
            }
          }
           btn.onclick = handler;
           btn.onmouseover = handler;
           btn.onmouseout = handler;
       }

要阻止特定事件的默认行为，可以使用preventDefault()方法。例如链接的默认行为就是在被单击时会导航到其href特性指定的URL。如果你想阻止链接导航这一默认行为，那么通过链接的onclick事件处理程序可以消灭它。
列举几个DOM中的所有事件对象都具有的属性和方法：
preventDefault()用来取消事件的默认行为。如果cancelable是true，则可以使用这个方法。
cancelable()表明是否可以取消事件的默认行为
stopPropagation()取消事件的进一步捕获或者冒泡，同时阻止任何事件处理程序被调用

  window.onload = function(){
        var btn = document.getElementById("mybutton");
        btn.onclick = function(){
            alert("Clicked");
            event.stopPropagation();
        };
        document.body.onclick = function(){
            alert("Body clicked");
        }
    }

stopPropagation()方法用于立即停用事件在DOM层次中的传播，即取消进一步的事件捕获或者冒泡 。例如上面这个例子，直接添加到一个按钮的事件处理程序可以调用stopPropagation(),从而避免触发注册在document.body上的事件处理程序。

IE中的事件对象

与访问DOM中的Event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。例如：

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

我们通过window.event取得了event对象，并检测了被触发的事件的类型。如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象 作为参数被传入事件处理程序函数中。
因为事件处理程序的作用域是根据指定它的方式来确定的额，所以不能认为this会始终等于事件目标，所以最好还是使用srcElement （事件目标，与DOM中的target属性相同）。
returnValue属性相当于DOM中的preventDefault()方法，它们的作用都是取消给定事件的默认行为。只要将returnValue设置为false，就可以阻止默认行为。例如：

var link = document.getElementById("myLink");
link.onclick = function(){
   window.event.returnValue = false;//获取链接，onclick事件处理程序使用returnValue达到阻止链接默认行为的目的
}

跨浏览器的事件对象

可以通过以下这个方法来实现浏览间的“求同存异”

var EventUtil = {
            addHandler:function(element,type,handler){
              //省略代码；
            },
            getEvent:function(event){//当触发事件时就会产生一个event对象
                return event? event : window.event;
            },
            getTarget:function(){
                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;//取消事件冒泡
                }
             }

        }

第一个方法getEvent()返回对event对象的引用。在使用这个方法的额时候，必须假设有一个事件传入到事件处理程序中，而且要把该变量传给这个方法，如下所示：

btn.onclick = function(){
   event = eventUtil.getEvent(event);
}

第二个方法是getTarget(),它返回事件的目标。在这个方法内部会检测event对象的target属性。
使用方法：

btn.onclick = function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);

}