JavaScript的事件冒泡机制

首先事件是什么？

事件是用户作出某个动作后浏览器而给出的反应

那什么是冒泡机制呢？

什么是冒泡？一个泡泡他是不是会从低到高往上升，那么事件冒泡机制就是事件往上升：

在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>