在js中，存在着一个事件，叫冒泡事件，该事件表示的是如果子节点触发某个事件，那么父节点有该事件的绑定的话，也会被触发。
我们上代码：
<div id="baba">
<button id="er">点我</button>
</div>
<script>
var baba = document.getElementById("ba")
baba.onclick = function(){
alert("baba")
}
var er = document.getElementById("er")
baba.onclick = function(){
alert("er")
}
</script>
当你点击了button之后，你会发现浏览器会显示"er",然后是baba,这就是事件冒泡。
2.事件冒泡的作用
假如你有很多个元素，他们都需要绑定一个函数，但是他们的函数只有value等属性不同，当然，可以通过给每一个元素绑定函数来写。
但是这样子我们的代码就变得很冗余，而且由于没一个函数都不一致，就会带来很多的内存浪费，这是面向过程的一种思想，函数的出现本来就是为了解决
面向过程思想的弊端的，面向对象的思想才是我们要学习的。
那么类比一下函数思想，我们也可以用冒泡事件来搞掂这个问题，请看代码
<body>
<ul id="ba">
<li value="1">1</li>
<li value="2">2</li>
<li value="3">3</li>
</ul>
</body>
<script>
var ba = document.getElementById("ba")
ba.onclick = function(evevt){
if (evevt.target.Nodename.toLocalLowerCase =="li"){
alert(evevt.target.value)
}
}
</script>
当有li标签被点击之后，事件会传到父标签，然后父标签可以通过函数的event自带参数去判断是不是li标签被点击了，如果是就取出其中的值，显示。
通过这个例子，我们是不是就能省下很多的空间嗯？
如果不需要事件冒泡的话，取消时很容易的
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
顺带说一句，在函数里面return false只会阻止默认行为，不会阻止冒泡事件
原文：https://www.cnblogs.com/wuyz-harder/p/15222671.html