DOM和DOM2和DOM3

DOM和DOM2和DOM3事件区别

DOM

DOM事件具有极好的跨浏览器优势，会以最快的速度绑定。
为某一个元素的同一个行为绑定不同的方法在行内会分别执行。
为某一个元素的同一个行为绑定不同的方法在script标签中后面的方法会覆盖前面的方法。

<div id="box" onclick="fun1();fun2()">点我</div>
<script>
	// 某一个元素的同一个行为绑定不同的方法在行内会分别执行
	function fun1() {
		console.log('方法1');
	}
	function fun2() {
		console.log('方法2');
	}
	// 执行 方法1		// 执行方法2
</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>

删除DOM 事件处理程序，只要将对应事件属性设为null即可

box.onclick = null;

---

DOM2

DOM2级事件是通过addEventListener绑定的事件，IE下的DOM2事件通过attachEvent绑定；可以给某一个元素的同一个行为绑定不同的方法在行内会分别执行。

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

删除DOM 2事件处理程序，通过removeEventListener

box.removeEventListener('click', fun2,false);

---

DOM3

DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：