通过事件冒泡来认识 this 和 event.target / event.srcElement 的区别

最新推荐文章于 2022-08-31 16:39:35 发布

iuukai

最新推荐文章于 2022-08-31 16:39:35 发布

阅读量372

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45389633/article/details/105682006

版权

JavaScript 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

this 与 event 的关系：掌门人与创始人。
掌门人会传承，会改变，经历几代。
创始人只有初代。

再说的通透点：
百米赛跑计算终点距离：
this.到终点距离 = 你当前位置与终点的距离，即还剩多长。（动态）
event.到终点的距离 = 起始位置与终点的距离，即全长。（静态）

事件冒泡中的 this 指向：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script type="text/javascript">
		window.onload = function() {
			document.getElementById('dv').onclick = function() {
				console.log(this.id);
			};
			document.getElementById('p1').onclick = function() {
				console.log(this.id);
			}
			document.getElementById('sp').onclick = function() {
				console.log(this.id);
			}
		}
	</script>
</head>
<body>
	<div id="dv" style="width: 300px;height: 300px;background: yellow;">
		<p id="p1" style="width: 150px;height: 150px;background: green;">
			<span id="sp" style="background: red;">Hello!</span>
		</p>
	</div>
</body>
</html>

点击最内层<span>标签，来触发事件冒泡。
控制台打印结果：
在这里插入图片描述
即this会根据冒泡改变指向对象。
首先，点 span，触发冒泡，打印 sp；
其次，泡泡触发 span 父元素，p，打印 p1；
最后，泡泡再次向上触发 span 父元素 div，打印 div。
（其实，泡泡还会一直向上找父元素的，还有body，html，这里就不说了）
这里，this 代表的是“经手人”，或“中间商”，谁触发，就找谁。
在这里插入图片描述

事件冒泡中的 event 指向：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script type="text/javascript">
		window.onload = function() {
			document.getElementById('dv').onclick = function() {
				console.log(window.event.srcElement.id);
				//console.log(window.event.target.id);		//IE8及以下不兼容
			};
			document.getElementById('p1').onclick = function() {
				console.log(window.event.srcElement.id);
				//console.log(window.event.target.id);		//IE8及以下不兼容
			}
			document.getElementById('sp').onclick = function() {
				console.log(window.event.srcElement.id);
				//console.log(window.event.target.id);		//IE8及以下不兼容
			}
		}
	</script>
</head>
<body>
	<div id="dv" style="width: 300px;height: 300px;background: yellow;">
		<p id="p1" style="width: 150px;height: 150px;background: green;">
			<span id="sp" style="background: red;">Hello!</span>
		</p>
	</div>
</body>
</html>

点击最内层<span>标签，来触发事件冒泡。
控制台打印结果：
在这里插入图片描述
与 this 不同，event 代表的是事件源，即，你刚开始点击谁，event 就始终代表谁，“无中间商”。
首先，点 span，触发冒泡，打印 sp；
因为 event 已经知道了，你点的事件源是 span，所以，即使冒泡，它还是会记住 span 为事件源。
所以，后面即使泡泡向上到 p、div，它也都记得，首先接触的是 span，所以均打印 sp。
在这里插入图片描述

this与event是两种不同的概念，有些时候this与event可以互换，有些时候则不可以，关键在于怎么用，用在哪（本小白也不太清楚）。

例如：本文例子中，只要都加上阻止冒泡属性，实际效果是相等的，因为不冒泡，也就不会向上触发了（即下例）

👉关于阻止事件冒泡：IE属性（cancelBubble）VS DOM方法（stopPropagation()）

this+阻止冒泡（此时，点哪里，就输出哪个，不冒泡）：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script type="text/javascript">
		window.onload = function() {
			document.getElementById('dv').onclick = function() {
				console.log(this.id);
				window.event.cancelBubble = true;	//非W3C标准，未来可能舍弃
			};
			document.getElementById('p1').onclick = function() {
				console.log(this.id);
				window.event.cancelBubble = true;	//非W3C标准，未来可能舍弃
			}
			document.getElementById('sp').onclick = function() {
				console.log(this.id);
				window.event.cancelBubble = true;	//非W3C标准，未来可能舍弃
			}
		}
	</script>
</head>
<body>
	<div id="dv" style="width: 300px;height: 300px;background: yellow;">
		<p id="p1" style="width: 150px;height: 150px;background: green;">
			<span id="sp" style="background: red;">Hello!</span>
		</p>
	</div>
</body>
</html>

event+阻止冒泡（此时，点哪里，就输出哪个，不冒泡）：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script type="text/javascript">
		window.onload = function() {
			document.getElementById('dv').onclick = function() {
				console.log(window.event.srcElement.id);
				//console.log(window.event.target.id);		//IE8及以下不兼容
				window.event.cancelBubble = true;	//非W3C标准，未来可能舍弃
			};
			document.getElementById('p1').onclick = function() {
				console.log(window.event.srcElement.id);
				//console.log(window.event.target.id);		//IE8及以下不兼容
				window.event.cancelBubble = true;	//非W3C标准，未来可能舍弃
			}
			document.getElementById('sp').onclick = function() {
				console.log(window.event.srcElement.id);
				//console.log(window.event.target.id);		//IE8及以下不兼容
				window.event.cancelBubble = true;	//非W3C标准，未来可能舍弃
			}
		}
	</script>
</head>
<body>
	<div id="dv" style="width: 300px;height: 300px;background: yellow;">
		<p id="p1" style="width: 150px;height: 150px;background: green;">
			<span id="sp" style="background: red;">Hello!</span>
		</p>
	</div>
</body>
</html>