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);

執行結果爲：
父元素捕獲
子元素冒泡
子元素捕獲
父元素冒泡