事件绑定和普通事件

最新推荐文章于 2024-10-25 18:44:18 发布

转载最新推荐文章于 2024-10-25 18:44:18 发布 · 460 阅读

文章标签：

#JS addEventListener #事件绑定和普通事件

js 专栏收录该内容

137 篇文章

订阅专栏

本文探讨了JavaScript中不同事件绑定方法的特点：普通事件绑定会互相覆盖，而addEventListener支持添加多个事件监听器，并且提供了事件冒泡和捕获的支持。此外，还讨论了事件绑定的兼容性和取消绑定的问题。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#d1{
			width: 50px;
			height: 50px;
			background: red;
			margin-bottom: 20px;
		}
		#d2{
			width: 50px;
			height: 50px;
			background: green;
		}
	</style>
</head>
<body>
	<div id="d1"></div>
	<div id="d2"></div>
	<script>
		d1.onclick=function(){
			console.log("1");
		}
		d1.onclick=function(){
			console.log("2");
		}
		//只输出2

		d2.addEventListener("click",function(){
			console.log("d2_1");
		},false);
		d2.addEventListener("click",function(){
			console.log("d2_2");
		},false);
		//输出d2_1、d2_2
	</script>
</body>
</html>

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定(addEventListener)方式添加事件可以添加多个。

addEventListener不兼容低版本IE

普通事件无法取消

addEventListener还支持事件冒泡+事件捕获，removeEventListener取消绑定事件

addEventListener中的false是默认情况，表示事件在冒泡阶段执行。true表示事件在捕获阶段执行。