前端学习-第二阶段-day11_学习前端-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34723035/article/details/111879318

今日练习

利用事件代理，实现添加后的列表也可以触发点击事件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 340px;
            margin: 100px auto;
        }

        li {
            list-style: none;
            height: 40px;
            border-bottom: 1px solid #9c5858;
            line-height: 40px;
        }

        span {

            display: inline-block;
            margin-top: 7px;
            margin-right: 4px;
            width: 40px;
            height: 26px;
            float: right;
            line-height: 26px;
            text-align: center;
            color: #d6fbd1;
            cursor: pointer;

        }

        span:nth-child(2) {
            background-color: #ff0000;
        }

        span:nth-child(3) {
            background-color: #018002;
        }

        button {
            width: 40px;
            margin: 40px 150px;
        }

        em {
            font-style: initial;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li><em>列表一</em><span>删除</span><span>修改</span></li>
            <li><em>列表二</em><span>删除</span><span>修改</span></li>
            <li><em>列表三</em><span>删除</span><span>修改</span></li>
            <li><em>列表四</em><span>删除</span><span>修改</span></li>
        </ul>
        <button>添加</button>
    </div>
    <script>
        var oBtn = document.getElementsByTagName("button")[0];
        var oUl = document.getElementsByTagName("ul")[0];

        oBtn.onclick = function () {

            var oLi = document.createElement("li");

            var oSpan1 = document.createElement("span");
            oSpan1.innerHTML = "删除";

            var oSpan2 = document.createElement("span");
            oSpan2.innerHTML = "修改";

            var oEm = document.createElement("em");
            var text = prompt("请输入内容").trim();
            oEm.innerHTML = text;
            if ((oEm.innerHTML.length > 0 )) {
                oLi.appendChild(oEm);
                oLi.appendChild(oSpan1);
                oLi.appendChild(oSpan2);
                oUl.appendChild(oLi);
            }

        }



        oUl.onclick = function (ev) {
            var ev = window.event || ev;

            if (ev.target.innerText == "删除") {
                oUl.removeChild(ev.target.parentNode);

            } else if (ev.target.innerText == "修改") {
                var pre = ev.target.previousElementSibling.previousElementSibling || ev.target.previousSibling.previousSibling;
                var on = prompt("请输入修改内容").trim();
                pre.innerText = on.length > 0 ? on : pre.innerText;
                console.log(ev.target.innerText);
            }

        }
    </script>
</body>

</html>