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