这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【
js事件冒泡、阻止事件冒泡以及阻止默认行为
】
大家好，我是IT修真院武汉分院web第17期的学员吴三水，一枚正直纯洁善良的web程序员。
今天给大家分享一下，修真院官网js（职业）任务四，深度思考中的知识点——js事件冒泡、阻止事件冒泡以及阻止默认行为
1.背景介绍
事件冒泡
故名思意，事件冒泡就像水底气泡浮到水面这一过程。即是事件从最底层逐个经过上面一级级事件的过程，就是事件冒泡。
默认事件
默认事件就是浏览器自己的行为，比如我们在点击a标签<a href="#">时候，浏览器跳转到指定页面。比如当我们滚动鼠标时页面会向下滚动。
2.知识剖析
事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。
事件冒泡传递的仅仅只是事件，并不会传递其他东西，如果父级没有绑定事件函数的话，就算传递了事件，也不会有什么表现，但是我们要清楚，事件是确确实实传递到了）
我们看下面代码：
//js
var a = document.getElementById("123");
var b = document.getElementById("321");
a.addEventListener("click", function () {
alert(1);
})
b.addEventListener("click", function () {
alert(2);
})
//html
<div id="123" style="display:inline-block;width:200px;height:200px;background: #ff0000;">我是父级元素
<div id="321" style="display:inline-block;margin-left:200px;width:100px;height:100px;background:#000;color:#fff;">我是子级元素</div>
</div>
上面两个父子关系的div,然后分别加了点击事件，当我们在子div里面点击的时候，会发现弹出了一次1，接着又弹出了2，这说明点击的时候，不仅子div的事件被触发了，它的父级的点击事件也触发了，说明子div的将事件传递给了父div。这种就是冒泡事件。
3.常见问题
大多数时候，事件冒泡给我们带来的缺是困扰，比如下面这个：
//js
var b = document.getElementById("321");
b.addEventListener("click", function () {
a.style.display = "block";
})
document.onclick = function () {
a.style.display = "none";
}
//html
<div id="123" style="display:inline-block;width:200px;height:200px;background: #ff0000;">点击除了#321外的地方我会显示</div>
<div id="321" style="display:inline-block;margin-left:200px;width:100px;height:100px;background:#000;color:#fff;">点击我#123会隐藏</div>
这个时候我们测试发现，怎么点击#321面板，#123面板都不会显示了，为什么呢？就是冒泡的原因，我们来分析下代码，当点击#321的时候，他会触发父亲级别的点击事件，然后一层一层的往上传，所以document的点击事件自然也被触发了，然后执行了自己身上的绑定事件，让#123面板消失。所以当你点击#321的时候首先，让粉丝面板显示，只是事件执行太快了，很快又执行了document的点击事件，让面板隐藏。 不信可以再两个事件之间加一个弹出，就可以测试。
4.解决方案
解决办法就是取消冒泡：
取消事件冒泡可以运用下面方法：
e.stopPropagation();
stopPropagation() 方法定义是：不再派发事件。所以直接调用的event 即可
window.event.cancelBubble = true；
这里的cancelBubble是 IE事件对象的属性定义：是否取消冒泡，设为true就可以了。
5.编码实战
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
//js
var b = document.getElementById("321");
b.addEventListener("click", function (e) {// 红色面板加事件
a.style.display = "block";
stopBubble(e)；//这样就不会再冒泡给父级了
})
document.onclick = function () {
a.style.display = "none";
}
6.扩展思考
如何阻止事件的默认行为？
阻止事件的默认行为可以运用下面方法：
1.e.preventDefault();
2.window.event.returnValue =false;
注：preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。
function stopDefault(e){
if(e && e.preventDefault){ //判断浏览器是非IE浏览器
e.preventDefault(); //非IE浏览器下使用preventDefault方法
}else{
//IE浏览器下令事件（window.event）的returnValue属性为false;
window.event.returnValue = false;
}
return false;
}
//html
<a href="http://www.baidu.com" id="test">百度</a>
//js
window.onload = function(){
var test = document.getElementById('test');
test.onclick = function(e){ //当单击此超链接时执行这个函数
alert('URL:' + this.href + ',不会跳转');
stopDefault(e);
}
}
7.参考文献
JavaScript事件——冒泡、捕获
js事件(Event)之（四）阻止默认操作
8.更多讨论
1.阻止事件冒泡和默认行为还有其他方法吗？
可以利用return false;来阻止 事件冒泡和静默行为。 注意：javascript的return false只会阻止默认行为，而用jQuery的话则既阻止默认行为又防止对象冒泡。
可以利用return false;来阻止 事件冒泡和静默行为。
注意：javascript的return false只会阻止默认行为，而用jQuery的话则既阻止默认行为又防止对象冒泡
//原生js，只会阻止默认行为，不会停止冒泡
var a = document.getElementById("testA");
a.onclick = function(){
return false;//当然 也阻止了事件本身
};
//jQuery，既阻止默认行为又停止冒泡
$("#testA").on('click',function(){
return false;//当然 也阻止了事件本身
});
2.既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
3.事件运行的原理？
当一个事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力， 即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去， 从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字， 就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。
鸣谢
感谢大家观看！
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地