<style>
.div1 {
width: 200px;
height: 200px;
background-color: bisque;
}
.div2 {
width: 100px;
height: 100px;
background-color: coral;
}
.div3 {
width: 50px;
height: 50px;
background-color: crimson;
}
.div4 {
width: 20px;
height: 20px;
background-color: purple;
}
div {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="div1">1
<div class="div2">2
<div class="div3">3
<div class="div4">4</div>
</div>
</div>
</div>
<script>
// 获取三个div,用于后续对div进行dom操作,主要针对事件。注意这三个div是有层级关系的。
var div1 = document.querySelector(".div1");
var div2 = document.querySelector(".div2");
var div3 = document.querySelector(".div3");
var div4 = document.querySelector(".div4");
// 给每个div都添加监听事件。尝试着捕获阶段
// 事件监听第三个参数默认不写为冒泡阶段拦截,
// 如果为true,则为捕获截断拦截。
// 如果为false,则为冒泡截断拦截。false是默认值。
div1.addEventListener("click", clickhandler1);
div2.addEventListener("click", clickhandler2, true);
div3.addEventListener("click", clickhandler3, true);
div4.addEventListener("click", clickhandler4, true);
//当调用这个函数时,打印对应的字符串
function clickhandler1(e) {
console.log('1');
}
function clickhandler2(e) {
console.log('2');
}
function clickhandler3(e) {
console.log('3');
e.stopPropagation();
}
function clickhandler4(e) {
console.log('4');
}
</script>
1.如果stopPropagation方法给的元素是捕获,那么阻止的就是捕获。
否则,阻止的就是冒泡。
2.点击谁,谁就是目标
。每一次都是先从捕获阶段->目标->冒泡阶段
考虑。如果中间达不到目标,那么后面就失败,不去执行
。
例子1
1是冒泡,2,3,4是捕获。
在3截断,点击4:
分析:
1).4是目标,所以1->2->3->4
。
2).3是阻断,3是捕获阶段阻断,所以阻断的是3的捕获截断。
3).所以点击4,只能从1->2->3
,进入不了4,然后后面的失败。捕获2和3.
例子2
2和4是捕获,1和3是冒泡。阻断3,点击4:
1).4是目标,所以从1,2,3,4进入。
2).在3处截断,3是冒泡,所以阻止3冒泡。所以
1->2->3->4->3.
3).先输出捕获的,再输出冒泡的。
输出2,4,3
.