一、事件捕获:事件传递的顺序 (父级到子级)
二、事件冒泡:事件处理的顺序 (默认:子级到父级)
三、取消冒泡
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