DOM事件机制(原理级别的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div {
width: 100%;
padding: 100px;
box-sizing: border-box;
}
.one {
background: thistle;
}
.two {
background: mistyrose;
}
.three {
background: coral;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three"></div><!--核心:层层padding: 100px;叠加的.宽高皆是.-->
</div>
</div>
<script type="text/javascript">
let divs = document.querySelectorAll('div');
let one = document.querySelector('.one');
let two = document.querySelector('.two');
let three = document.querySelector('.three');
divs.forEach(div=>div.addEventListener("click",logText,
{
once:true,//最多重复三次,写了这个代表点击几次相同的区域都是没有重复的.
capture:false//意思是:true的话·代表从第一个div开始进入里面最里面three.false的意思是从里面执行到最外面的one
}));
function logText(e) {
console.log(this.classList.value);
// e.stopPropagation();
e.stopPropagation();//代表只会执行一次
}
</script>
</body>
</html>我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1dv4z80fihmgs
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/10/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
