⭐ 事件传播
先来思考一个问题：
当页面的盒子有嵌套时，如果盒子都设置了同样的事件监听，那么事件监听触发的顺序是什么样的呢？比如下面图中，三个盒子都设置了onclick事件监听，当鼠标点击最内侧的盒子时，会触发三个盒子的onclick事件，那这三个事件触发的顺序是怎样的？
我们编写代码来验证一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 142px;
height: 142px;
border: 1px solid #000;
padding: 20px;
}
#box2 {
width: 102px;
height: 102px;
border: 1px solid #000;
padding: 20px;
}
#box3 {
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var oBox3 = document.getElementById('box3');
oBox1.onclick = function () {
console.log('鼠标单击box1');
};
oBox2.onclick = function () {
console.log('鼠标单击box2');
};
oBox3.onclick = function () {
console.log('鼠标单击box3');
};
</script>
</body>
</html>
这种从内到外触发事件的过程就是事件传播的过程。
但事实上，真实的事件传播并不仅仅是由内到外的，而是先从外到内，然后再从内到外，那为什么结果只有从内到外的呢？这是因为onxxx事件监听只能监听后面的一段过程，即从内到外的过程。
那么问题来了，如何才能监听到捕获阶段呢？这就用到第二种事件监听方法——addEventListener()方法。
在DOM更新过程中，事件监听分成两个级别：DOM0级事件监听和DOM2级事件监听。一开始只有DOM0级事件监听，只能监听到冒泡阶段；在DOM2中新增加了addEventListener()方法，可以监听到捕获和冒泡两个阶段。之所以没有DOM1级，是因为DOM1中没有对事件监听的方法进行更新修改。
⭐ addEventListener()方法。
addEventListener()方法的示例代码：
oBox.addEventListener('click', function(){ //click表示鼠标单击
//事件处理函数代码
}, true);//true表示监听捕获阶段，false表示监听冒泡阶段
上面的例子中，用addEventListener()方法监听整个事件传播的过程，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 142px;
height: 142px;
border: 1px solid #000;
padding: 20px;
}
#box2 {
width: 102px;
height: 102px;
border: 1px solid #000;
padding: 20px;
}
#box3 {
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var oBox3 = document.getElementById('box3');
oBox1.addEventListener('click', function () {
console.log('我是box1的捕获阶段');
}, true);
oBox2.addEventListener('click', function () {
console.log('我是box2的捕获阶段');
}, true);
oBox3.addEventListener('click', function () {
console.log('我是box3的捕获阶段');
}, true);
oBox1.addEventListener('click', function () {
console.log('我是box1的冒泡阶段');
}, false);
oBox2.addEventListener('click', function () {
console.log('我是box2的冒泡阶段');
}, false);
oBox3.addEventListener('click', function () {
console.log('我是box3的冒泡阶段');
}, false);
</script>
</body>
</html>
上述代码中，需要注意的是，触发事件监听的顺序跟代码书写的顺序没有关系的，新手可能会误以为两者有关系，我们把捕获和冒泡的代码顺序调一下也不会影响事件传播顺序：
还需注意的是，如果给元素设置相同的两个或多个同名事件时，DOM0级的事件监听后面写的会覆盖先写的；而DOM2级的会按顺序执行。示例代码：
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var oBox3 = document.getElementById('box3');
oBox2.onclick = function () { //这个事件监听会被后面的覆盖
console.log('A');
};
oBox2.onclick = function () {
console.log('B');
};
oBox2.addEventListener('click', function () { //不会被覆盖
console.log('C');
},true)
oBox2.addEventListener('click', function () { //不会被覆盖
console.log('D');
},true)
</script>
</body>