《JavaScript》DOM e.target和this的区别

最新推荐文章于 2024-10-07 09:24:46 发布

glglgl1

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量482

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/glglgl1/article/details/123829822

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div
		{
			width: 100px;
			height: 100px;
			background-color: #00FFFF;
		}
		</style>
		<ul>
		
			<li>jk</li>
		    <li>jk</li>
		</ul>
	</head>
	<body>
		<script>

		var div = document.querySelector('div');
		div.addEventListener('click', function(e)
		{
			console.log(e.target);
			console.log(this);
		})
		var ul = document.querySelector('ul');
		div.addEventListener('click', function(e)//我们给ul绑定了事件，那么this就指向ul
		{
			console.log(this);

			console.log(e.target);
		
		}
		
		</script>
	</body>
</html>

e-target 返回的是触发事件的对象（元素）this返回的是绑定事件的对象

区别e.target 点击了那个元素就返回那个元素this 那个元素绑定了这个事件就那么返回谁

var ul = document.querySelector('ul');
       div.addEventListener('click', function(e)//我们给ul绑定了事件，那么this就指向ul
       {
           console.log(this);
           e.target 指向我们点击的哪个对象，谁触发了这个事件我们点击的是li e.target 指向的就是li
           console.log(e.target);

       }

       </script>