JS中DOM事件

我们在浏览网页时，点击鼠标或者按下键盘时，网页需要给我们一个相应的事件，而这种相应事件就是JavaScript与HTML进行交互，JavaScript是通过事件与HTML进行交互的。

JavaScript中事件有很多种，我们这里就直接把他包装成一个对象，方便以后兼容的调用。

<p>示例文字</p>
<script>
var eventUtil={
    //事件监听
    addHandler:function(element,type,handler){
       if(element.addEventListener){
            element.addEventListener(type,handler,false);//标准浏览器规范
       }else if(element.attachEvent){
            element.attachEvent('on'+type,handler);//兼容老版IE
       }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;
    },
    getElement: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;
        }
    }
}
var p = document.getElementsByTagName("p")[0];
p.onclick = function(e){
    console.log(eventUtil.getElement(e));
    console.log(eventUtil.getEvent(e));
    console.log(eventUtil.getType(e));
}
</script>