JS-事件捕获和冒泡

一、事件捕获：事件传递的顺序 （父级到子级）
二、事件冒泡：事件处理的顺序 （默认：子级到父级）
三、取消冒泡

evObj.cancelBubble = true;  // 阻止冒泡
evObj.stopPropagation();     // 停止传播

就是在这个事件中，不向下（或者上）传递

addEvent(box,'click',function(ev){
    console.log("box");
    var evObj = window.event || ev;
    evObj.cancelBubble = true;
})
addEvent(div,'click',function(ev){
    console.log("div");
    var evObj = window.event || ev;
    evObj.cancelBubble = true;
})
addEvent(item,'click',function(ev){
    console.log('item');
    var evObj = window.event || ev;
    evObj.cancelBubble = true;
})

冒泡阶段处理事件（子级到父级）

            默认：item,div,box;     div,box;       box
  box阶段取消冒泡：item，div，box；    div，box；     box
  div阶段取消冒泡：item,div;          div ;         box
 item阶段取消冒泡：item；             div，box；     box

捕获阶段处理事件（父级到子级）

            默认：box,div,item;     box,div;       box
  box阶段取消冒泡：box；              box；          box
  div阶段取消冒泡：box,div;           box,div;      box
 item阶段取消冒泡：box,div,item;      box,div;      box