DOM0级事件处理与DOM2级事件处理的区别

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);