首页> 基础笔记 >JS/JQ基础学习 >事件 事件
JavaScript-事件的冒泡
作者：小萝卜 2023-03-22 【 javascript 】 浏览 431
简介事件的冒泡 在触发一个元素的事件的时候 会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)
