總結JS事件處理程序（5種）

js的事件處理程序有五種類型，分別是：

（1）HTML事件處理程序；

（2）DOM0級事件處理程序；

（3）DOM2級事件處理程序；

（4）IE事件處理程序；

（5）跨瀏覽器的事件處理程序；

--------------------------------------------------------------------------------------

下面我們來分別解釋一下這五種事件處理程序

（1）HTML事件處理程序:事件直接寫在DOM節點內部

<button onclick="say('hello')"></button>

<script>
    function say(msg) {
        alert(msg);
    }
</script>

（2）DOM0級事件處理程序:把一個函數賦值給一個事件的處理程序屬性

<button id="btn"></button>

<script>
  var Btn = document.getElementById('btn');
  Btn.onclick = function() {
       alert('hello');
  }
</script>

在DOM0級事件處理程序上刪除事件用下述方法：

Btn.onclick = null;

（3）DOM2級事件處理程序：可以給一個元素添加多個事件並綁定不同的事件方法

<button id="btn"></button>
<script>
// 將事件處理程序添加到事件的冒泡階段，這樣可以最大限度的兼容各大瀏覽器
    var Btn = document.getElementById('btn');
    Btn.addEventListener("click", function() {
        alert('hello');
    }, false);

    //通過addEventListener添加的事件，只能通過removeEventListener刪除
    Btn.removeEventListener('click', function() {
        alert('hello');
    }, false);

</script>

（4）IE事件處理程序:IE有自己的一套事件處理程序，提供兩個方法attachEvent()和detachEvent()；

<button id="btn"></button>
<script>
var Btn = document.getElementById('btn');
    Btn.attachEvent("onclick", function(){
        alert('hello');
    });
    Btn.detachEvent("onclick", function(){
        alert('hello');
    });
</script>

IE下的事件都是以冒泡的方式執行事件監聽函數，所以attachEvent()和detachEvent()方法只有兩個參數，不需要是否捕獲的參數。值得注意的是，IE下的事件監聽函數中的this指向的是window，而不是事件所在的元素。
（5）跨瀏覽器的事件處理程序：其實就是用條件語句，針對不同瀏覽器，寫不同的處理程序

//跨瀏覽器事件處理程序
    var eventUtil={
        //添加句柄(element:元素，type:事件類型，handler:事件處理函數)
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{   //DOM0級事件處理程序的判斷
                element['on'+type]=handler;
            }
        },
        //刪除句柄(element:元素，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{   //DOM0級事件處理程序的判斷
                element['on'+type]=null;
            }
        }
    };