JS——冒泡案例

Posted 站错队了同志

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS——冒泡案例相关的知识，希望对你有一定的参考价值。

模态框

1、因为a链接和和顶级document都注册了单击事件，所以要阻止a链接向父级盒子冒泡，不然又会从document的单击事件走一遍

2、在document的单击事件中，只需要判断触发事件的目标元素是不是白色盒子部分就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body, html {
            height: 100%;
        }

        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
        }

        .login {
            width: 200px;
            height: 200px;
            background: white;
            margin: 200px auto;
            border: 3px solid #FFA25E;
        }
    </style>
</head>
<body>
<a href="#">注册</a>
<a href="#">登陆</a>
<div class="mask">
    <div class="login" id="login"></div>
</div>
<script>
    //需求：点击登陆a链接，显示模态框，之后点击除了中间白色登陆框部分，都可以将模态框部分隐藏
    var a = document.getElementsByTagName("a")[1];
    var mask = document.getElementsByTagName("div")[0];

    a.onclick = function (ev) {
        ev = ev || window.event;
        mask.style.display = "block";
        if (ev || ev.stopPropagation) {
            ev.stopPropagation();
        } else {
            ev.cancelBubble = true;
        }
    }
    document.onclick = function (ev) {
        ev = ev || window.event;
        var targetId = ev.target ? ev.target.id : ev.srcElement.id;
        if (targetId !== "login") {
            mask.style.display = "none";
        }
    }
</script>
</body>
</html>

事件委托

1、普通注册事件没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托。

2、虽然新追加的li标签没有注册上单击事件，但是冒泡的特性会找到其父标签，恰好父标签注册了单击，而触发事件的target目标元素如果是li标签就好办了。

3、注意通过event.target.tagName获取的值是大写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            width: 100px;
            margin: 50px auto;
        }

        li {
            background: #CCA55B;
            margin: 10px;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>
<body>
<button>创建新人</button>
<ul>
    <li>老人</li>
    <li>老人</li>
    <li>老人</li>
    <li>老人</li>
</ul>
<script>
    var btn = document.getElementsByTagName("button")[0];
    var ul = document.getElementsByTagName("ul")[0];
    // for (var i = 0; i < ul.children.length; i++) {
    //     ul.children[i].onclick = function () {
    //         console.log(this.innerHTML);
    //     }
    // }
    btn.onclick = function () {
        for (var i = 0; i < 4; i++) {
            var li = document.createElement("li");
            li.innerHTML = "新人";
            ul.appendChild(li);
        }
    }
    ul.onclick = function (ev) {
        ev = ev || window.event;
        var target = ev.target ? ev.target : ev.srcElement;
        if (target.tagName === "LI") {
            console.log(target.innerHTML);
        }
    }
</script>
</body>
</html>

以上是关于JS——冒泡案例的主要内容，如果未能解决你的问题，请参考以下文章

Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段

JS中点击事件冒泡阻止

JS自制SEO框架（js案例）

js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

原生js阻止事件冒泡代码实例

0137 函数案例：数组翻转冒泡排序判断闰年