JS冒泡事件与事件捕获实例详解
本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考，具体如下：
案例
<!DOCTYPEhtml>
<html>
<head>
<title>冒泡事件</title>
<scripttype="text/javascript">
window.onload=function(){
window.onclick=function(){
alert("Window");//顶级
};
document.onclick=function(){
alert("Document");//次顶级
};
document.documentElement.onclick=function(){
alert("Html");//次次顶级
};
document.body.onclick=function(){
alert("Body");//次次次顶级
};
document.getElementById("myDiv").onclick=function(){
alert("Div");//最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
};
}
</script>
</head>
<body>
<divid="myDiv">点我</div>
</body>
</html>
小结
1.点击myDiv。依次是Div-Body-Html-Document-Window
2.点击其他空白地方。依次是Html-Document-Window
3.连续点击两次，会按顺序执行两次
4.冒泡的前提是，父级也定义了相应的事件
再看一个更复杂的例子
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>事件捕捉</title>
<scripttype="text/javascript">
window.onload=function(){
window.addEventListener("click",function(){
alert("Window-true");
},true);//true-事件句柄在捕获阶段执行,false-false-默认。事件句柄在冒泡阶段执行
document.addEventListener("click",function(){
alert("Document-true");
},true);
document.documentElement.addEventListener("click",function(){
alert("Html-true");
},true);
document.body.addEventListener("click",function(){
alert("Body-true");
},true);
document.getElementById("myDiv").addEventListener("click",function(){
alert("Div-true");
},true);
window.addEventListener("click",function(){
alert("Window-false");
},false);//true-事件句柄在捕获阶段执行,false-false-默认。事件句柄在冒泡阶段执行
document.addEventListener("click",function(){
alert("Document-false");
},false);
document.documentElement.addEventListener("click",function(){
alert("Html-false");
},false);
document.body.addEventListener("click",function(){
alert("Body-false");
},false);
document.getElementById("myDiv").addEventListener("click",function(){
alert("Div-false");
},false);
window.onclick=function(){
alert("Window-click");//顶级
};
document.onclick=function(){
alert("Document-click");//次顶级
};
document.documentElement.onclick=function(){
alert("Html-click");//次次顶级
};
document.body.onclick=function(){
alert("Body-click");//次次次顶级
};
document.getElementById("myDiv").onclick=function(){
alert("Div-click");//最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
};
}
</script>
</head>
<body>
<divid="myDiv">点我</div>
</body>
</html>
小结
1.点击的执行结果是
Window-true
Document-true
Html-true
Body-true
Div-true
Div-false
Div-click
Body-false
Body-click
Html-false
Html-click
Document-false
Document-click
Window-false
Window-click
2.顺序与js代码顺序无关
3.就算没有定义点击事件，一样可以捕获点击事件，只要点击到，就能捕获到
再次改造，阻止冒泡
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>事件捕捉</title>
<scripttype="text/javascript">
window.onload=function(){
document.addEventListener("click",function(){
alert("Document-true");
},true);
window.addEventListener("click",function(){
alert("Window-true");
},true);//true-事件句柄在捕获阶段执行,false-false-默认。事件句柄在冒泡阶段执行
document.documentElement.addEventListener("click",function(){
alert("Html-true");
},true);
document.body.addEventListener("click",function(){
alert("Body-true");
},true);
document.getElementById("myDiv").addEventListener("click",function(){
alert("Div-true");
},true);
window.addEventListener("click",function(){
alert("Window-false");
},false);//true-事件句柄在捕获阶段执行,false-false-默认。事件句柄在冒泡阶段执行
document.addEventListener("click",function(){
alert("Document-false");
},false);
document.documentElement.addEventListener("click",function(){
alert("Html-false");
},false);
document.body.addEventListener("click",function(){
alert("Body-false");
},false);
document.getElementById("myDiv").addEventListener("click",function(){
alert("Div-false");
},false);
window.onclick=function(){
alert("Window-click");//顶级
};
document.onclick=function(){
alert("Document-click");//次顶级
};
document.documentElement.onclick=function(){
alert("Html-click");//次次顶级
};
document.body.onclick=function(){
alert("Body-click");//次次次顶级
};
document.getElementById("myDiv").onclick=function(){
alert("Div-click");//最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
event.stopPropagation();//阻止冒泡
};
}
</script>
</head>
<body>
<divid="myDiv">点我</div>
</body>
</html>
小结
Window-true
Document-true
Html-true
Body-true
Div-true
Div-false
Div-click
终止了，没有后续的内容了
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。