到底什么是DOM0、DOM2、DOM3？？

dom事件有好几个级别，分别是DOM0级、DOM1级、DOM2级、DOM3级，每个级别的事件定义方式不同，特点也不同，下边就具体分析下：

DOM0级

分两种：

• 在标签中直接写 onclick事件

<input id="myButton" type="button" value="Press Me" οnclick="alert('thanks');" >

• 在js中写 οnclick=function() {} 函数

document.getElementById("myButton").onclick = function () {
    alert('thanks');
}

DOM0级事件特点：

•  行内绑定中，同一个元素的同一个行为的不同方法会分别执行（都执行）。

<div id="box" onclick="fun1();fun2()">点我</div>

<script>
	// 某一个元素的同一个行为绑定不同的方法在行内会分别执行
	function fun1() {
		console.log('方法1');
	}
	function fun2() {
		console.log('方法2');
	}
	// 执行 方法1		// 执行方法2
</script>

结果：方法1 和方法2都会log

• script标签中，同一个元素的同一个行为的不同方法只能执行最后一个（后边的会把前边的覆盖）。

<div id="box">点我</div>
<script>
	// 某一个元素的同一个行为绑定不同的方法在script标签中后面的方法会覆盖前面的方法
	var box = document.getElementById('box');
	box.onclick = fun1;
	box.onclick = fun2;
	function fun1() {
		console.log('方法1');
	}
	function fun2() {
		console.log('方法2');
	}
	// 执行方法2；方法2覆盖方法1，所有方法1不执行
</script>

结果：只log出 “方法2”

• 删除 DOM0 事件，只需将对应事件设置为null。

box.onclick = null;

DOM1级

DOM1级一般不涉及到。

DOM2级

原生通过 addEventListener()和removeEventListener()两个方法 添加和移除事件。

（IE下的DOM2事件通过attachEvent绑定，detachEvent移除，可自行查询）

这两个方法都接收三个参数：

1. 第一个参数是事件名（如click）；
2. 第二个参数是事件处理程序函数 （不能是匿名函数，因为移除时会用到）； 
3. 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

<div id="box">点我</div>
<script>
 	var box = document.getElementById('box');
	box.addEventListener('click', fun1,false);
	box.addEventListener('click', fun2,false);
	function fun1() {
		console.log('方法1');
	}
	function fun2() {
		console.log('方法2');
	}
	// 执行方法1		// 执行方法2
</script>

结果： 方法1 和方法2 均会触发

DOM2级事件特点：

• addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
• removeEventListener():不能移除匿名添加的函数。

DOM3级

DOM3级事件是在DOM2级基础上增加了事件类型，具体如下：

注意：

1. DOM0和DOM2可以共存，不会互相覆盖；
2. script中的DOM0会覆盖行内 的DOM0。

<div id="box" onclick="alert('方法1')">点我</div>
<script>
 	var box = document.getElementById('box');
	box.onclick = function () {
		console.log('方法2');
	}

结果：只log出 “方法2” ；方法2把行内的 方法1 覆盖掉。