先不说【捕捉，冒泡】是什么东西（概念）

首先我们来看一段代码
1
2
3
4
5
6
7
8
9
10
// html
<div id="grand">
  爷爷
  <div id="father">
    爸爸
    <div id="son">
      儿子
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
// js
grand.addEventListener('click', function f1() {
  console.log('fn1')
})

father.addEventListener('click', function f2() {
  console.log('fn2')
})

son.addEventListener('click', function f3() {
  console.log('fn3')
})
当我们鼠标点击儿子时，触发的事件顺序究竟是什么样的呢？

1、

1
2
3
fn3
fn2
fn1

2、

1
2
3
fn1
fn2
fn3
一试便知，是第一种 fn3=>fn2=>fn1 。

通过查阅 MDN ，我们可以使用第三个参数，默认为 falsy

1、所以当我们如下写法时：

1
2
3
4
5
6
7
8
9
10
11
grand.addEventListener('click', function f1() {
  console.log('fn1')
})

father.addEventListener('click', function f2() {
  console.log('fn2')
})

son.addEventListener('click', function f3() {
  console.log('fn3')
})

结果为 fn3=>fn2=>fn1

2、所以当我们如下写法时：

1
2
3
4
5
6
7
8
9
10
11
grand.addEventListener('click', function f1() {
  console.log('fn1')
}, true)

father.addEventListener('click', function f2() {
  console.log('fn2')
}, true)

son.addEventListener('click', function f3() {
  console.log('fn3')
}, true)

结果为 fn1=>fn2=>fn3

接下来我们就可以来说说【捕获，冒泡】

为了更清楚，我们可以用一张图来表示

左边就是参数为 true 的状态（捕获阶段）， 右边就是 false 的状态（冒泡阶段），
所以就有了先捕获在冒泡这一说法

对着这张图我们再来看一段代码（虽然很无聊，因为没人会这么写）
1
2
3
4
5
6
7
8
9
10
11
grand.addEventListener('click', function f1() {
  console.log('fn1')
}, true)

father.addEventListener('click', function f2() {
  console.log('fn2')
})

son.addEventListener('click', function f3() {
  console.log('fn3')
})

答案也很显然易见，为 true 的先执行，也就是 fn1=>fn3=>fn2

到此，【捕获、冒泡就应该已经讲完了】

但是有一个特例！！！

就是如下的情况时，当【捕获、冒泡】在同一个元素上时（也虽然很无聊）
1
2
3
4
5
6
son.addEventListener('click', function f3() {
  console.log('fn3冒泡')
})
son.addEventListener('click', function f3() {
  console.log('fn3捕获')
}, true)

按照上图或者理论（先捕获再冒泡）说法，应该是 fn3捕获=>fn3冒泡
但是实际情况却是
当【捕获、冒泡】在同一个元素上时，那就是 按照书写顺序来，谁先写，就先执行
上述代码执行结果就应该是 fn3冒泡=>fn3捕获

end