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>

 

posted @ 2021-05-18 08:47  咸瑜  阅读(326)  评论(1)  编辑  收藏  举报