Javascript冒泡事件分析

时间 2019-12-06

原文原文链接

在javascript的dom操做作确定会遇到js的冒泡事件，最多见的是div弹窗事件如图解javascript

当点击灰色部分是弹窗消失，点击黑色部分时没有效果。css

经过下面一段代码来分析js的冒泡事件html

html代码：java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js冒泡事件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>js冒泡事件分析</h1>
        <hr>
        <div class="box bg-gray">
            <button class="btn">
                Click me !
            </button>
        </div>
    </div>
    <script>
    var box=document.querySelector(".box"),
    btn=document.querySelector(".btn");
    box.onclick=function(event){
        alert("我是div");
        
    }
    btn.onclick=function(event){
        alert("我是button");
    }
    </script>
</body>
</html>

View Code

再看效果：http://2.liteng.sinaapp.com/javascript/starevent.htmlnode

使用firefox浏览器的默认开发者工具的3d视图能够清晰的看出div层的前后顺序浏览器

图解：app

当点击按钮时会弹出“我是button”再弹出“我是div”,由于先触发按钮事件以后触发下一层div点击事件，dom

事件的触发是先进先出原则。ide

图解：工具

那么有些时候咱们并不想多个事件的触发而致使冲突，因此event有stopPropagation();方法来阻止冒泡

还有一个event的方法也是比较经常使用的好比一个连接，点击连接时我不想跳转，则使用event.preventDefault();方法

实例代码以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js冒泡事件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>js冒泡事件分析</h1>
        <hr>
        <div class="box bg-gray">
            <button class="btn">
                Click me !
            </button>
            <a href="http://www.liteng.org" id="link">我是连接</a>
        </div>
    </div>
    <script>
    var box=document.querySelector(".box"),
    btn=document.querySelector(".btn");
    box.onclick=function(event){
        alert("我是div");
        
    }
    btn.onclick=function(event){
        alert("我是button");
        event.stopPropagation();
    }
    document.getElementById('link').onclick=function(event){
        alert("我是link");
        event.preventDefault();
    }
    /*区分event.stopPropagation();和event.preventDefault();
      前者使用stopPropagation()方法阻止事件冒泡
      后者是阻止默认的行为好比阻止超连接

    */
    </script>
</body>
</html>

点击看最终效果：http://2.liteng.sinaapp.com/javascript/event.html

原文地址：http://liteng.org/node/37