js中的事件捕获和事件捕获

事件流的三个阶段：

1. 事件捕获阶段
2. 目标阶段
3. 事件冒泡事件

关于这三个阶段的介绍网上已经有很多介绍了，在这里不做介绍。本文主要说下需要注意的一点：当在事发元素上即绑定了捕获事件又绑定了冒泡事件时，事发元素上的执行顺序由事件注册顺序决定。
如：

var p = document.getElementById("parent");
var s = document.getElementById("son");
p.addEventListener("click", function(e){
    console.log("父元素捕获");
}, true);
p.addEventListener("click", function(e){
    console.log("父元素冒泡");
}, false);
s.addEventListener("click", function(e){
    console.log("子元素捕获");
}, true);
s.addEventListener("click", function(e){
    console.log("子元素冒泡");
}, false);

执行结果为：
父元素捕获
子元素捕获
子元素冒泡
父元素冒泡
但是，当改变事件绑定事件时，即

p.addEventListener("click", function(e){
    console.log("父元素捕获");
}, true);
p.addEventListener("click", function(e){
    console.log("父元素冒泡");
}, false);
s.addEventListener("click", function(e){
    console.log("子元素冒泡");
}, false);
s.addEventListener("click", function(e){
    console.log("子元素捕获");
}, true);

执行结果为：
父元素捕获
子元素冒泡
子元素捕获
父元素冒泡