<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1,
.box2 {
width: 200px;
height: 200px;
background-color: orange;
margin: 50px auto;
overflow: hidden;
}
.box1 div,
.box2 div {
width: 100px;
height: 100px;
background-color: pink;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box1">
<div></div>
</div>
<div class="box2">
<div></div>
</div>
<script>
// DOM 事件流(描述的是从页面中接收事件的顺序） 捕获(true) 处理 冒泡(false)
// 冒泡 (由element 向上开始传递
// 例如（父亲和里面的儿子都有点击事件 ，当点击儿子触发事件时 ，
// 儿子先接收到事件 先执行 》 父亲后接收到事件,后执行）
var box1 = document.querySelector('.box1');
var box11 = box1.querySelector('div');
box1.addEventListener('click', f, false); // false 表示冒泡 （默认 可以省略）
box11.addEventListener('click', f1, false); // 冒泡 即 由小(element)到大(document)
// 捕获（由document 向下开始传递
// 例如（父亲和里面的儿子都有点击事件 ，当点击儿子触发事件时 ，
// 父亲先接收到事件 先执行》儿子后接收到事件，后执行）
var box2 = document.querySelector('.box2');
var box22 = box2.querySelector('div');
box2.addEventListener('click', f, true); // true 表示捕获
box22.addEventListener('click', f1, true); // 捕获 由大到小 即：document 到element
// 处理 ( 先接收到的对象先处理 即：执行
function f() { // 使用阻止冒泡 时 传入参数 e ；
alert('第一');
// e.stopPropagation(); //标准（阻止冒泡 停止传播的意思
// e.cancelBubble = true; // 非标准 （IE6-8 取消冒泡
}
function f1() {
alert('第二')
}
</script>
</body>
</html>
