事件捕獲階段：事件從最上一級標簽開始往下查找，直到捕獲到事件目標(target) ------事件傳遞的順序是-從父級到子級
事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。 -----------事件傳遞的順序是-從子級到父級
functionaddEvent(element,type,fn){
if(element.addEventListener) {
//如果第三個值為ture，則會在冒泡階段觸發
element.addEventListener(type,fn,false);
//如果第三個值為ture，則會在捕獲階段觸發
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;
}
}
//********************綁定/移除事件******************************
/*********************************
*********取消冒泡
********參數
***********ev:要取消冒泡的事件對象
************************************/
functionstopBubble(e){
if(e&&e.stopPropagation){
e.stopPropagation();
}
else{
e.cancleBubble();
}
}
//這時候element.addEventListener(type,fn,false);觸發的是冒泡事件 --效果是每點擊一個box只有該box被打印
事件傳遞的順序是-從父級到子級
如果沒加varevObj=window.event||ev;evObj.cancelBubble=true;
點擊xm 時，會打印點擊了xm點擊了item點擊了box
但是加上了取消冒泡事件后取消了冒泡后就不會再冒泡，父級就不會打印，從誰上加上取消冒泡它的父級之后就不會打印了
addEvent(box,"click",function(){
console.log("點擊了box");
varevObj=window.event||ev;
evObj.cancelBubble=true;
});
addEvent(item,"click",function(ev){
console.log("點擊了item");
varevObj=window.event||ev;
evObj.cancelBubble=true;
});
addEvent(xm,"click",function(ev){
console.log("點擊了xm");
//取消冒泡 取消了冒泡后就不會再冒泡，父級就不會打印
varevObj=window.event||ev;
evObj.cancelBubble=true;
});
取消冒泡事件
varevObj=window.event||ev;
1、evObj.cancelBubble=true;
2、evObj.stopPropagation();
//這時候element.addEventListener(type,fn,true);——觸發的是捕獲事件
事件傳遞的順序是-從子級到父級
如果沒加varevObj=window.event||ev;evObj.cancelBubble=true;
點擊xm 時，會打印點擊了box點擊了item點擊了xm
但是加上了取消冒泡事件后會組織捕獲，子級就不會打印，從誰上加上取消冒泡它的子級之后就不會打印了
addEvent(box,"click",function(){
console.log("點擊了box");
varevObj=window.event||ev;
// evObj.cancelBubble=true;
evObj.stopPropagation();
});
addEvent(item,"click",function(ev){
console.log("點擊了item");
// var evObj=window.event||ev;
// evObj.cancelBubble=true;
});
addEvent(xm,"click",function(ev){
console.log("點擊了xm");
//取消冒泡--可以阻止捕獲 取消了冒泡后就不會再冒泡，父級就不會打印
// var evObj=window.event||ev;
// evObj.cancelBubble=true;