事件流-事件传播-阻止冒泡

因为onclick监听的是事件传播时的冒泡阶段，事件冒泡阶段的传播是从btn开始往外div传，btn先接收到点击事件，然后迅速执行事件处理函数，此时事件还没传播完，马上就要轮到div接收事件了，但是迅速执行btn的事件处理函数，阻止了事件传播（div在该事件流的冒泡阶段接收不到事件了），所以阻止事件传播代码写在btn的事件处理函数里；

大白话理解：btn和div在事件发生之前就开始监听了（主线程执行完毕），意思是准备好了如果接收到事件了，就做一件事，这件事就是执行事件处理函数；此时我在button上点击了一下鼠标，这时要看一下能监听哪个阶段的（因为点击btn，事件先从外传到里，div先接收点击事件，然后再btn接收点击事件，但是这是捕获阶段，虽然接收到事件，但是无法做出反应，因为只能监听冒泡阶段的接收事件）

注意这里是在监听冒泡阶段的事件处理函数加的组织传播，所以捕获阶段的事件传播并没有被阻止，所以要看看阻止传播代码加在哪；

 

几个注意点：

1.有的事件只有冒泡的传播过程（mouseenter等）

2.一般的事件都是有捕获阶段-目标-冒泡阶段，如图

点击时，事件传播过程，a-b-c-b-a分别按顺序接收到点击事件；接收到点击事件要看看有没有加事件监听

3.有的事件监听只能监听冒泡阶段（dom0事件监听），大白话：当该事件传播至冒泡阶段（这里举例就是c-b-a过程），看看cba有无添加能监听冒泡阶段的监听器（事件处理函数），有就可以执行其绑定的该事件处理函数