01期：web浏览器事件传播机制（捕获和冒泡）

今天想跟大家分享一下我对web事件传播机制的理解。

一、背景

在实际开发过程中，我们有时会给多个具有嵌套关系的dom元素，绑定类型相同但处理不同的event listener，如click listener。当内层元素绑定的click事件被触发时，其外层元素的click事件也会被触发，那么请思考一下，如何控制它们的执行顺序？

二、web标准定义的listener执行顺序

在确定执行顺序之前，我们先看一下存在哪几种可能的执行顺序。从dom元素的嵌套关系来看:

我们可以看到两种基本顺序，一是从“外到内”，二是“从内到外”。而web标准采用的顺序是“先从外到内，再从内到外”，是这两种基本顺序的拼接。刚好是一个来回、一个往返，我喜欢把这种顺序定义为“公交路线”。

特别地，

1. 每一个嵌套的dom元素都可以看成是“公交路线”上的一个巴士站，，每一个巴士站都会经停两次，第一次是巴士出站时，第二次是巴士回站时（ps：bus总站为最外层元素，终点站为最内层元素）；

2. 每一个绑定在dom元素的listener可以看作是一个乘客，同一个dom元素可能绑定多个listener，意味着有个乘客队列，遵循“先上车先执行，上车即执行”原则（ps：此原则同样适用于具有嵌套关系的多个dom元素间的listeners）；