首先事件是什么？
事件是用户作出某个动作后 浏览器而给出的反应
那什么是冒泡机制呢？
什么是冒泡？ 一个泡泡 他是不是会从低到高往上升，那么事件冒泡机制 就是 事件往上升：
在JavaScript中 一棵DOM树 他的事件被激活 就会往上传递信息 层层往上传递，直至传递到dom的根节点。
例如：以下代码你就会看懂了 一直往上传递信息 上面的onclck也会被激活 但你记住啊 只有onclck啊！ 都是对应的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript study</title>
</head>
<body>
<div onclick="alert('a')">
<div onclick="alert('b')">
点我？先b再a
<div onclick="alert('c')">
點我？c->b->a
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
一般地，事件在传递过程中会有一些信息，这些是事件的组成部分：事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息。
那么我们怎么阻止它呢？
阻止事件冒泡
在相应的处理函数内，加入 event.stopPropagation() ,终止事件的广播分发，这样事件停留在本节点，不会再往外传播了
例如：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript study</title>
</head>
<body>
<div onclick="alert('a')">
<div onclick="alert('b')">
<div onclick="fun()"> <!--在JS代码中已经进行阻止事件冒泡了-->
點我？b->a
</div>
</div>
</div>
<script type="text/javascript">
function fun(){
alert("c");
event.stopPropagation();
}
</script>
</body>
</html>