捕获和冒泡

// 一个事件类型绑定了两个事件处理函数，先捕获后冒泡
// 顺序是：先捕获后冒泡
// 事件执行是谁先绑定了谁先执行

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