我之见于Javascript中DOM0级处理和DOM2级处理事件的区别

最新推荐文章于 2023-12-04 14:26:13 发布

原创最新推荐文章于 2023-12-04 14:26:13 发布 · 862 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #javascript

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文对比了DOM0级与DOM2级事件处理的区别。DOM0级通过直接赋值实现事件处理，但每次赋值会覆盖之前的处理程序；而DOM2级则采用addEventListener方法添加事件监听器，支持在同一事件类型上附加多个处理函数。

1.Dom0级处理事件

把一个函数赋值给一个事件处理程序属性

例子：

<!doctype html>
<html>
<head></head>
<body>
<p id="pid">Hello</p>
<button id="btn">test</button>
<script>
	var btn1=document.getElementById("btn");
	btn1.onclick=function (){
		alert("This is a DOM0 Delay thing");
	}

</script>
</body>
</html>

特性：

<!doctype html>
<html>
<head></head>
<body>
<p id="pid">Hello</p>
<button id="btn">test</button>
<script>
	var btn1=document.getElementById("btn");
	btn1.onclick=function (){
		alert("This is a DOM0 Delay thing NO.1");
	}
	btn1.onclick=function (){
		alert("This is a DOM0 Delay thing NO.2");
	}

</script>
</body>
</html>

这时可看出，代码中出现了覆盖，并未出现“This is DOM0 Delay Thing NO.1”而是出现了“……NO.2”;

清除Dom0级事件即在代码后添加

btn1.onclick=null;

我们记住这点！

2.DOM2级处理事件

>>>处理方式与Dom 0不同，可添加多个事件处理程序，而且可以是同一事件类型，不同效果叠加，先后执行。

与DOM0相对的是，这种处理事件出现了句柄：

addEventListener("事件名","事件处理函数","布尔值");

True:事件捕获

Flase:事件冒泡

去除句柄:

removeEventListener();

我们上代码，代码出真知。

<!doctype html>
<html>
<head></head>
<body>
<p id="pid">Hello</p>
<button id="btn">test</button>
<script>
	var btn1=document.getElementById("btn");
	btn1.addEventListener("click",function(){
		alert("This is DOM2 Delay Thing NO.1");
	})
	btn1.addEventListener("click",function(){
		alert("This is DOM2 Delay Thing NO.2");
	})
	btn1.addEventListener("click",function(){
		alert("This is DOM2 Delay Thing NO.3");
	})

</script>
</body>
</html>