事件对象详解-优快云博客

事件对象

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

例如鼠标操作导致的事件对象中，会包含鼠标的位置信息。
键盘操作导致的事件对象中，会包含与按下的键有关的信息。
IE中事件对象event是全局变量window.event可以随时拿到
其它浏览器必须在参数中传递才能获取事件对象event
其它浏览器中默认第一个参数传递的是事件，如果你显示的传递了别的参数，这个事件你将无法获得，所以要兼容每个浏览器，方法内首先要判断这个event参数（有时候是e参数），如果没有则是IE的判断
简单的方法是 event = event||window.event

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

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;
               }
            },
            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;
               }
            },
          getEvent:function(event){
            return event?event:window.event;
          },
          getType:function(event){
            return event.type;
          },
          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;
           }
         }
  };