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>