事件委托版留言板 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1000px;
            margin: auto;
        }

        dd {
            background: #eee;
            margin-bottom: 20px;
        }

        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }

        .dialog {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 30px;
            background-color: #fff;
        }

        .show {
            display: block !important;
        }
    </style>
</head>

<body>

    <div class="container">
        <h2>留言板</h2>
        <p>
            昵称：
            <input type="text" class="nickname">
        </p>
        <p>
            留言:
            <textarea class="msg"></textarea>
        </p>
        <p>
            <button class="btn">留言</button>
        </p>


        <dl>
            <dt>大家都在说</dt>

        </dl>
    </div>

    <!-- 弹窗 -->
    <div class="cover">
        <div class="dialog">
            <h3>回复留言</h3>
            <textarea class="reply_msg"></textarea>
            <br>
            <button class="confirm_btn">确认回复</button>
            <button class="cancel_btn">取消回复</button>
        </div>
    </div>

    <script>

        // 
        var oReply// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        //    事件委托：委托给谁？
        // document.addEventListener('click' , function(){})
        document.onclick = function (e) {
            var e = e || event;
            var target = e.target || e.srcElement;

            // 留言
            if (target.className === 'btn') {
                //    获取用户名和留言内容
                var nickname = $('.nickname').value;
                var msg = $('.msg').value;
                if (nickname && msg) {
                    // 创建留言
                    createMsg(nickname, msg)
                }
            }

            // 删除
            if (target.className === 'del_btn') {
                target.parentNode.remove()
            }

            // 回复
            if (target.className === 'reply_btn') {
                // 显示弹窗
                // $('.cover').style.display = 'block'

                // className  classList 区分使用！！！！！！！！！！！！！！
                // $('.cover').className.add()   错误的
                // $('.cover').className += ' show';
                $('.cover').classList.add('show');

                // 找到回复留言的地方
                // this和target的区别！！！！！！！！！！！！！！！！！
                oReply = target.previousElementSibling;
                console.log(oReply);
            }

            // 确认回复??????????????????????????????????????????????????
            if (target.className === 'confirm_btn') {

                // 1 获取输入框的值
                // 2 创建回复
                // 3 关闭弹窗
                var replyMsg = $('.reply_msg').value;
                if (replyMsg) {
                    console.log(oReply);
                    createReply(replyMsg);

                }

            }


            // 取消回复
            if (target.className === 'cancel_btn') {
                $('.cover').classList.remove('show');
            }
        }

        // 创建回复
        function createReply(msg) {
            var oP = document.createElement('p');
            oP.innerHTML = msg;
            oReply.appendChild(oP);   //oReply是全局变量!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        }


        // 创建留言
        function createMsg(name, msg) {
            // 创建标签
            var oDD = document.createElement('dd');
            // 给标签加内容
            oDD.innerHTML = `
                    <h3>
                        <span>${name}</span>
                        <span>${new Date()}</span>
                    </h3>
                    <p>${msg}</p>
                    <div class="huiFu"></div>
                    <button class="reply_btn">回复</button>
                    <button class="del_btn">删除</button>
            `
            // 把标签插入到页面中   appendChild  insertBefore
            $('dl').insertBefore(oDD, $('dt').nextSibling);

            // djs 函数
        }



        // 获取所有的  集合
        function $(s) {
            return document.querySelector(s)
        }


    </script>


</body>

</html>

 

posted @ 2021-07-07 18:57  JSkolo_yyds  阅读(45)  评论(0)    收藏  举报