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

最新推荐文章于 2022-05-30 10:00:00 发布

pythonniu

最新推荐文章于 2022-05-30 10:00:00 发布

阅读量818

点赞数

分类专栏： javascript 文章标签： dom javascript

本文链接：https://blog.csdn.net/pythonniu/article/details/54606828

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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.οnclick=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.οnclick=function (){
		alert("This is a DOM0 Delay thing NO.1");
	}
	btn1.οnclick=function (){
		alert("This is a DOM0 Delay thing NO.2");
	}

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

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

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

btn1.οnclick=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>