addEventListener 與attachEvent

第一：簡單的通用方法（IE && FF）

window.onload = function(){
   var oDiv = document.getElementById("J_myDiv"); //找到對象
   oDiv.onclick = function(){                                   //設置事件監聽函數
        alert("click");
   }
}

缺點：1.添加單一事件

         2.不能刪除事件

 

第二：IE中監聽函數

var oDiv;

function fnClick(){
    alert("click me");
    oDiv.detachEvent("onclick",fnClick);//刪除監聽函數
}

window.onload = function(){
   oDiv = document.getElementById("J_myDiv");//找到對象
   oDiv.attachEvent("onclick",fnClick);       //添加監聽函數
}

 

第三：標準DOM監聽函數

var oDiv;

function fnClick1(){
   alert("click1");
   // oDiv.removeEventListener("click",fnClick2,false); //刪除監聽函數2
}

function fnClick2(){
   alert("click2");
}

window.onload = function(){

     oDiv = document.getElementById("J_myDiv"); //找到對象
     oDiv.addEventListener("click",fnClick1,false);   //添加監聽函數1
     oDiv.addEventListener("click",fnClick2,false);   //添加監聽函數2

}

第四：從js實例來看事件監聽 參看：http://imethan.com/?p=208

第五：從實例來看JS的事件監聽學習筆記（事件監聽綁定、ff/IE不一樣的處理機制兼容總結)參看：http://hi.baidu.com/dou917/blog/item/40219f37e6e3deee1b4cff67.html

第六：代碼總結

<script language="javascript">
//Javascript 事件演示
window.onload = function(){
    var hideBox = function(event){
        document.getElementById('status_show').style.display = 'none';
        document.getElementById('status_hide').style.display = 'block';
    };
    var showBox = function(event){
        document.getElementById('status_show').style.display = 'block';
        document.getElementById('status_hide').style.display = 'none';
        stopEvent(event);
    };
    var stopEvent = function(event){
        e = event || window.event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else {
            e.cancelBubble = true;
        }
    };
    if(document.addEventListener){
        document.addEventListener('click', hideBox, false);
        document.getElementById('status_hide').addEventListener('click', showBox, false);
        document.getElementById('status_show').addEventListener('click', stopEvent, false);
    }else {
        //For IE
        document.attachEvent('onclick', hideBox);
        document.getElementById('status_hide').attachEvent('onclick', showBox);
        document.getElementById('status_show').attachEvent('onclick', stopEvent, showBox);
    }
};
</script>

 

 

• onclick這種寫法是DOM0級規範的寫法，確實是全部的瀏覽器支持的，可是這種寫法有一些弊端：

1. 這種寫法不能同時綁定多個事件

2. 這種寫法使代碼耦合在了一塊兒

• addEventListener() 是DOM2標準中定義的方法，它能夠控制是在事件捕獲階段或者是在冒泡階段調用事件處理程序（由這個函數的第三個參數決定true/false），既然這個是DOM2標準中定義的，那麼只有支持DOM2級事件處理程序的瀏覽器才支持這個方法（IE9,Firefox,Safari,Chrome和Opera都支持這個）。

• attachEvent()方法並非DOM標準定義的，而是IE本身實現的，而因爲IE8及以前版本只支持事件冒泡，因此可想而知這個方法添加的事件處理程序都只能在冒泡階段纔會被調用，addEventListener()和attachEvent()還有一個區別就是第一個參數——事件類型，attachEvent()的事件類型都是前面帶'on'的，好比點擊事件 click ，addEventListener()能夠傳入 "click"，而 attachEvent() 卻要傳入 'onclick'；