这篇文章主要介绍了JavaScript事件捕获与事件冒泡的示例，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
站在用户的角度思考问题，与客户深入沟通，找到南雄网站设计与南雄网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广、申请域名、虚拟主机、企业邮箱。业务覆盖南雄地区。
气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层，层层往上传递，直至传递到dom的根节点。当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制
在不同浏览器中，冒泡的程度不同：
IE 6.0:
p -> body -> html -> document
其他浏览器:
p -> body -> html -> document -> window
并不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload
当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制。冒泡事件，如下代码：
father{ width: 300px; height: 300px; background-color: red; margin: auto; } window.onload = function () {
var father = document.getElementById("father");
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("点击了按钮");
};
father.onclick = function () {
alert("点击了父标签");
};
document.onclick = function () {
alert("点击了文档");
}
}
在点击按钮和红色区域的时候，事件会一层层的向上传递，这个并不是我们想要的效果，那该如何阻止事件冒泡呢？
标准浏览器 和 ie浏览器
w3c：event.stopPropagation() proPagation
IE：event.cancelBubble = true
兼容的写法
if(event && event.stopPropagation){ // w3c标准
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
window.onload = function () {
var father = document.getElementById("father"); var btn = document.getElementById("btn");
btn.onclick = function () {
if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
alert("点击了按钮");
};
father.onclick = function () {
if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
alert("点击了父标签");
};
document.onclick = function () {
alert("点击了文档");
}
}
需要在那个地方阻止冒泡事件，就在其中添加阻止冒泡的方法；
可以将阻止冒泡的方法封装为一个函数需要的时候直接调用即可。
感谢你能够认真阅读完这篇文章，希望小编分享JavaScript事件捕获与事件冒泡的示例内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!
