DOM是分等級的，分別是DOM0,1,2,3級別越高，語句越高階。

一、DOM0級事件處理

DOM0級事件處理方式就是講一個函式賦值給一個事件處理屬性，如：

box.onclick = function(){
	alert("我是box");
}

就是把函式賦值給了box的onclick屬性，當然每個元素都有自己處理程式的屬性，例如：onmousedown、onmouseup等，

on**這種事件繫結方法屬於DOM0級事件繫結。

DOM0級事件有什麼特點：

1.ＤＯＭ０級事件只能觸發事件冒泡階段不能觸發事件捕獲階段。

box2.onclick = function(){
	alert("我是box2");
}
box3.onclick = function(){
	alert("我是box3");
}
box1.onclick = function(){
	alert("我是box1");
}
 

  不管我們怎麼改變事件的繫結順序，不影響我的彈出框。box3然後box2最後box1。為什麼？因為onclick只能觸發事件冒泡不能觸發事件捕獲。因為事件冒泡是從事件流的最內層的元素依次往外層傳播。

2.同一元素繫結相同的事件，後面的會覆蓋前面的。

box3.onclick = function(){
	alert("A");
}
box3.onclick = function(){
	alert("B");
}
box3.onclick = function(){
	alert("C");
}

點選box3只會彈出C。因為on**方法相當於給元素新增屬性。後面寫的會覆蓋先寫的。

多說一點：還可以通過行內式給元素繫結事件。

3.this指的是事件流傳播到的這個元素，就元素本身。

二、DOM2級事件處理

DOM2繫結事件的方法addEeventListener()；

DOM2刪除事件的方法removeEeventListener()；

addEventListener(“事件名”，事件執行語句，布林值)

事件名：click不用書寫on，只需要書寫click，

事件執行語句：就是函式，可以是匿名函式，也是有名函式。

布林值：true表示事件捕獲，false表示事件冒泡。

DOM2級事件繫結的特點：

1、對於精確的元素不區分事件捕獲和事件冒泡，事件的執行順序是按照繫結順序來的。

2、同一個元素繫結相同的事件，後面的不會覆蓋前面的。因為DOM2

box2.addEventListener("click",function(){
	console.log("c");
},false);
box2.addEventListener("click",function(){
	console.log("D");
},false);
box2.addEventListener("click",function(){
	console.log("E");
},false);

以上“c”、“D”、“E”都會輸出。

另外，在DOM2級事件處理中通過addEventListener()新增的匿名函式無法移除，要先給函式命名：

 function handler(){
        console.log("可以移除的函式");
    }
    btn.addEventListener('click',handler, false);
    btn.removeEventListener('click',handler,false);