捕獲和冒泡

// 一個事件類型綁定了兩個事件處理函數，先捕獲後冒泡
// 順序是：先捕獲後冒泡
// 事件執行是誰先綁定了誰先執行

var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var inner = document.getElementsByClassName('inner')[0];

wrapper.onclick = function(){
    console.log("wrapperBubble");
}
content.onclick = function(){
    console.log('contentBubble');
}
inner.onclick = function(){
    console.log("innerBubble")
}

wrapper.addEventListener('click',function(){
    console.log("wrapper");
},true);
content.addEventListener('click',function(){
    console.log("content");
},true);
inner.addEventListener('click',function(){
    console.log("innerBuhuo");
},true);

先捕獲，後冒泡，作用於它自己身上的，就直接先點擊哪個是哪個
事件執行的順序符合誰先綁定誰先執行

並不是所有的事件都冒泡
不冒泡的：focus,blur,change,submit,reset,select等

// ul裏li不固定，輸出他的內容innerText
// 用事件委託

var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    e.stopPropagation();
    console.log(target.innerText);
}

事件委託的優點：
1、性能高，不需要循環
2、靈活，可以有很多li