事件捕获|冒泡

JS中的事件顺序

两个模型

事件捕获：由外到内

事件冒泡：由内到外，理解成从里面开始冒泡

               | |
---------------| |-----------------
| outer        | |                |
|   -----------| |-----------     |
|   |inner     \ /          |     |
|   -------------------------     |
|        事件捕获          |
-----------------------------------

               / \
---------------| |-----------------
| outer        | |                |
|   -----------| |-----------     |
|   |inner     | |          |     |
|   -------------------------     |
|        事件冒泡          |
-----------------------------------

W3C 模型

W3C标准则取其折中方案. W3C事件模型中发生的任何事件, 先(从其祖先元素document)开始一路向下捕获, 直到达到目标元素, 其后再次从目标元素开始冒泡.

          1. 先从上往下捕获
                  |
                 | |  / \
-----------------| |--| |-----------------
| outer          | |  | |                |
|   -------------| |--| |-----------     |
|   |   inner    \ /  | |          |     |
|   |                  |           |     |
|   |   2. 到达目标元素后从下往上冒泡|     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

如果addEventListener的最后一个参数是true, 那么处理函数将在捕获阶段被触发; 否则(false), 会在冒泡阶段被触发.

var selector = document.querySelector.bind(document);
selector('div.outer').addEventListener('click', (e) => {
    selector('p:first-of-type').textContent += 'outer clicked! '
}, true)
selector('div.inner').addEventListener('click', (e) => {
    selector('p:first-of-type').textContent += 'inner clicked! '
}, false)
document.addEventListener('click', (e) => {
    selector('p:first-of-type').textContent += 'document clicked! '
}, true)

// log
document clicked! outer clicked! inner clicked!

var selector = document.querySelector.bind(document);
selector('div.outer').addEventListener('click', (e) => {
    selector('p:first-of-type').textContent += 'outer clicked! '
    console.log(e);
}, false)
selector('div.inner').addEventListener('click', (e) => {
    selector('p:first-of-type').textContent += 'inner clicked! '
    console.log(e);
}, false)
document.addEventListener('click', (e) => {
    selector('p:first-of-type').textContent += 'document clicked! '
}, false)

// log
inner clicked! outer clicked! document clicked!