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>

posted @ 2017-12-05 16:49  var_obj  阅读(231)  评论(0)  编辑  收藏  举报