DOM事件流
捕获与冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// dom 事件流 三个阶段
// 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段.
// 2. onclick 和 attachEvent(ie) 只能得到冒泡阶段.
// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段
// document -> html -> body -> father -> son
// var son = document.querySelector('.son');
// son.addEventListener('click', function() {
// alert('son');
// }, true);
// var father = document.querySelector('.father');
// father.addEventListener('click', function() {
// alert('father');
// }, true);
// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段
// son -> father ->body -> html -> document
var son = document.querySelector(".son");
var father = document.querySelector(".father");
son.addEventListener(
"click",
function () {
alert("son");
},
false
);
father.addEventListener(
"click",
function () {
alert("father");
},
false
);
document.addEventListener("click", function () {
alert("document");
});
</script>
</body>
</html>