首页> 基础笔记 >JS/JQ基础学习 >事件 事件

JavaScript-事件的冒泡

作者:小萝卜 2023-03-22 浏览 235

简介事件的冒泡 在触发一个元素的事件的时候 会i自动去触发该元素先辈元素的同类型事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件的冒泡</title>
	<style type="text/css">
		div{position:absolute;left:50px;top:50px;}
		#five{width:500px;height:500px;border-radius:50%;background:orange;left:400px;top:40px;}
		#four{width:400px;height:400px;border-radius:50%;background:pink}
		#three{width:300px;height:300px;border-radius:50%;background:cyan}
		#two{width:200px;height:200px;border-radius:50%;background:yellow}
		#one{width:100px;height:100px;border-radius:50%;background:purple}
	</style>
</head>
<body>
	<div id="five">
		<div id="four">
			<div id="three">
				<div id="two">
					<div id="one"></div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	var divs = document.getElementsByTagName('div');
	//事件的冒泡 在触发一个元素的事件的时候  会i自动去触发该元素先辈元素的同类型事件
	//遍历
	for(var i=0;i<divs.length;i++){
		//绑定单击事件
		divs[i].onclick = function(e){
			this.style.background = "black";
			//阻止元素的事件冒泡
			e.stopPropagation();
		}
	}

	//扩展知识 获取当前元素计算之后的样式
	var one = document.getElementById('one');
	//获取当前one元素计算之后的样式
	var res = getComputedStyle(one);//get 获取  computed计算的 style样式
	//获取宽度样式
	var width =res.width;
	alert(width);
	</script>
</body>
</html>
 

很赞哦! (0)

文章评论

    高端网站建设