事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(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;