DOM事件流解析

什么是事件流？

事件流：描述的就是从页面中接受事件的顺序。分有事件冒泡与事件捕获两种。

什么是事件冒泡？

事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。

什么是事件捕获？

事件捕获的概念，与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件。

明白了上面的三个概念基本上就弄懂了DOM的事件流了，下面来彻底明白事件流。

DOM事件流的三个阶段：

1. 事件捕获阶段（为截获事件提供了机会）
2. 处于目标阶段
3. 事件冒泡阶段（对事件作出响应）

当一个DOM事件触发时，它不是在触发的对象上只触发一次的，而是经历上述的三个阶段，即开始从文档的根节点流向目标对象，然后在目标对向上被触发，之后再回溯到文档的根节点。

来个实例：

var button = document.getElementById('clickMe');

button.onclick = function() {
  console.log('1. You click Button');
};
document.body.onclick = function() {
  console.log('2. You click body');
};
document.onclick = function() {
  console.log('3. You click document');
};
window.onclick = function() {
  console.log('4. You click window');
};

把window点击事件更改为使用事件捕获模式

window.addEventListener('click', function() {
   console.log('4. You click window');
 }, true);//true代表使用事件捕获模式，alse则表示使用事件冒泡模式

输出为4->1->2->3点击事件先被父元素截获了，且该函数只在事件捕获阶段起作用。

阻止事件冒泡：
stopPropagation()防止事件冒泡而带来不必要的错误和困扰。

button.addEventListener('click', function(event) {
   // event为事件对象
   console.log('1. You click Button');
   event.stopPropagation();
   console.log('Stop Propagation!');
 }, false);

输出为4->1，事件在到达具体元素后，停止了冒泡。但不影响父元素的事件捕获。

本文参考：http://www.cnblogs.com/LIUYANZUO/p/5332583.html