事件绑定onclick 与事件监听addEventListener 的区别

最新推荐文章于 2024-01-26 20:25:43 发布

一月清辉

最新推荐文章于 2024-01-26 20:25:43 发布

阅读量868

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/yiyueqinghui/article/details/118566313

版权

javascript 专栏收录该内容

134 篇文章 15 订阅

订阅专栏

事件绑定与事件监听的区别

事件绑定：同一个对象，进行多次事件绑定，则后绑定的事件会覆盖之前绑定的事件，总之只能执行最后一个事件. -------- onclick

事件监听：同一个对象，进行多次事件监听，都会执行 -------addEventListener

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li data-id=1>1</li>
			<li data-id=2>2</li>
			<li data-id=3>3</li>
			<li data-id=4>4</li>
		</ul>
	</body>
	<script>
		//事件绑定：同一个对象，进行多次事件绑定，则后绑定的事件会覆盖之前绑定的事件，总之只能绑定最后一个事件
		let ul = document.querySelector('ul');
		ul.onclick = function(e){   // 由于被覆盖，不会执行，
			let {target} = e;
			let id = target.dataset.id;
			console.log(`事件绑定：给ul绑定的第一个事件,${id}`)
		}
		
		ul.onclick = function(e){    // 会执行，
			let {target} = e;
			console.dir(target);
			let id = target.dataset.id;
			console.log(`事件绑定：给ul绑定的第二个事件,${id}`)
		}
		
		
		//事件监听：同一个对象，进行多次事件监听，都会执行
		ul.addEventListener('click',function(e){   // 会执行，
			let {target} = e;
			console.dir(target);
			let id = target.dataset.id;
			console.log(`事件监听：监听ul的第一个事件,${id}`)
		})
		ul.addEventListener('click',function(e){   // 会执行，
			let {target} = e;
			console.dir(target);
			let id = target.dataset.id;
			console.log(`事件监听：监听ul的第二个事件,${id}`)
		})
	</script>
</html>

点击后执行如下
在这里插入图片描述

一月清辉

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
事件绑定onclick 与事件监听addEventListener 的区别

事件绑定与事件监听的区别事件绑定：同一个对象，进行多次事件绑定，则后绑定的事件会覆盖之前绑定的事件，总之只能执行最后一个事件. -------- onclick事件监听：同一个对象，进行多次事件监听，都会执行 -------addEventListener示例如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </he
复制链接

扫一扫

专栏目录