target与this的区别

hcoke

已于 2022-03-18 17:06:19 修改

阅读量670

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-03-18 17:04:04 首次发布

本文链接：https://blog.csdn.net/m0_62962469/article/details/123579741

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

这篇博客探讨了JavaScript中事件处理的相关概念，包括e.target和this的区别。通过示例展示了如何在div和ul元素上监听点击事件，并打印出触发事件的对象。文章还提及了currentTarget属性及其在不同浏览器的兼容性处理。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			123
		</div>
		<ul>
			<li>abc</li>
			<li>abc</li>
			<li>abc</li>
		</ul>
		<script type="text/javascript">
			//常见事件对象的属性和方法
			//1. e.target 返回的是触发事件的对象(元素)
			//区别： e.target点击了那个元素，就返回那个元素  this那个元素绑定了这个点击事件，那么就返回谁
			var div = document.querySelector('div');
			div.addEventListener('click', function(e) {
				console.log(e.target);
				console.log(this);
			})
			var ul = document.querySelector('ul');
			ul.addEventListener('click', function(e) {
				//我们给ul绑定了事件 那么this 就指向ul
				console.log(this);
				console.log(e.currentTarget);
				//e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target指向的就是li
				console.log(e.target);
			})
            //处理兼容性的问题 currentTarget
			// div.onclick = function(e) {
			// 	e = e || window.event;
			// 	var target = e.target || e.srcElement;
			// 	console.log(target);
			// }
			//2.this有个非常相似的属性 currentTarget
		</script>
	</body>
</html>

e.target 返回的是触发事件的对象(元素)

我们给ul绑定了事件那么this 就指向ul

e.target 指向我们点击的那个对象谁触发了这个事件我们点击的是li e.target指向的就是li

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