事件捕獲階段：事件從最上一級(jí)標(biāo)簽開(kāi)始往下查找，直到捕獲到事件目標(biāo)(target) ------事件傳遞的順序是-從父級(jí)到子級(jí)
事件冒泡階段：事件從事件目標(biāo)(target)開(kāi)始讲冠，往上冒泡直到頁(yè)面的最上一級(jí)標(biāo)簽朽缴。 -----------事件傳遞的順序是-從子級(jí)到父級(jí)
functionaddEvent(element,type,fn){
if(element.addEventListener) {
//如果第三個(gè)值為ture饰剥，則會(huì)在冒泡階段觸發(fā)
element.addEventListener(type,fn,false);
//如果第三個(gè)值為ture浆西，則會(huì)在捕獲階段觸發(fā)
element.addEventListener(type,fn,true);
}
else if(attachEvent){
element.attachEvent("on"+type,fn);
}
else{
element["on"+type]=fn;
}
}
functionremoveEvent(element,type,fn){
if(element.addEventListener) {
element.removeEventListener(type,fn,false);
}
else if(attachEvent){
element.detachEvent("on"+type,fn);
}
else{
element["on"+type]=null;
}
}
//********************綁定/移除事件******************************
/*********************************
*********取消冒泡
********參數(shù)
***********ev:要取消冒泡的事件對(duì)象
************************************/
functionstopBubble(e){
if(e&&e.stopPropagation){
e.stopPropagation();
}
else{
e.cancleBubble();
}
}
//這時(shí)候element.addEventListener(type,fn,false);觸發(fā)的是冒泡事件 --效果是每點(diǎn)擊一個(gè)box只有該box被打印
事件傳遞的順序是-從父級(jí)到子級(jí)
如果沒(méi)加varevObj=window.event||ev;evObj.cancelBubble=true;
點(diǎn)擊xm 時(shí)洋魂，會(huì)打印點(diǎn)擊了xm點(diǎn)擊了item點(diǎn)擊了box
但是加上了取消冒泡事件后取消了冒泡后就不會(huì)再冒泡聋亡，父級(jí)就不會(huì)打印肘习，從誰(shuí)上加上取消冒泡它的父級(jí)之后就不會(huì)打印了
addEvent(box,"click",function(){
console.log("點(diǎn)擊了box");
varevObj=window.event||ev;
evObj.cancelBubble=true;
});
addEvent(item,"click",function(ev){
console.log("點(diǎn)擊了item");
varevObj=window.event||ev;
evObj.cancelBubble=true;
});
addEvent(xm,"click",function(ev){
console.log("點(diǎn)擊了xm");
//取消冒泡 取消了冒泡后就不會(huì)再冒泡，父級(jí)就不會(huì)打印
varevObj=window.event||ev;
evObj.cancelBubble=true;
});
取消冒泡事件
varevObj=window.event||ev;
1坡倔、evObj.cancelBubble=true;
2漂佩、evObj.stopPropagation();
//這時(shí)候element.addEventListener(type,fn,true);——觸發(fā)的是捕獲事件
事件傳遞的順序是-從子級(jí)到父級(jí)
如果沒(méi)加varevObj=window.event||ev;evObj.cancelBubble=true;
點(diǎn)擊xm 時(shí)，會(huì)打印點(diǎn)擊了box點(diǎn)擊了item點(diǎn)擊了xm
但是加上了取消冒泡事件后會(huì)組織捕獲罪塔，子級(jí)就不會(huì)打印投蝉，從誰(shuí)上加上取消冒泡它的子級(jí)之后就不會(huì)打印了
addEvent(box,"click",function(){
console.log("點(diǎn)擊了box");
varevObj=window.event||ev;
// evObj.cancelBubble=true;
evObj.stopPropagation();
});
addEvent(item,"click",function(ev){
console.log("點(diǎn)擊了item");
// var evObj=window.event||ev;
// evObj.cancelBubble=true;
});
addEvent(xm,"click",function(ev){
console.log("點(diǎn)擊了xm");
//取消冒泡--可以阻止捕獲 取消了冒泡后就不會(huì)再冒泡，父級(jí)就不會(huì)打印
// var evObj=window.event||ev;
// evObj.cancelBubble=true;