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级事件的基础上添加了更多的事件类型,全部类型如下:
在这里插入图片描述


版权声明:本文为xiaozong301原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。