原生JS使用事件委托实现留言板

最新推荐文章于 2024-07-08 16:22:29 发布

西红柿炒番茄@ZXR

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量223

点赞数 4

文章标签： javascript es6 html css3

本文链接：https://blog.csdn.net/weixin_46005715/article/details/115559811

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言框demo</title>
</head>
<body>
<input type="text" id="ipt">
<button id="btn">ADD</button>
<ul id="list">

</ul>
<script>

    // 留言框
    let ipt = document.querySelector('#ipt');
    let btn = document.querySelector('#btn');
    let list = document.querySelectorAll('#list');
    let ul = document.querySelector('ul');
    let message;
    function fn() {
            let newLi = `<li>
            <span style="display: inline-block;width: 218px">${message}</span>
            <button id="del">DELETE</button>
            </li>`
            ul.innerHTML += newLi;
            let del = document.querySelectorAll('#del')
            ipt.value = '';
    }
    // function send() {
    //     // 1、获取文本框内容 2、创建li放进ul中
    //     let message = txt.value; //文本框内容
    //     if (message != "") {
    //         //文本框内容输入不为空的时候发送有效
    //         let newmessage = document.createElement("li") //创建一个li元素节点
    //         list.appendChild(newmessage) //在ul末尾添加li
    //         newmessage.innerText = message //文本框中的内容写入li中
    //         newmessage.className = "mine" //为元素加入类名
    //         txt.value = '' //清空文本框
    //         // 滚动到可视区域
    //         newmessage.scrollIntoView()
    //
    //     } else {
    //         alert("不能发送空消息")
    //     }
    //
    // }

    ipt.onkeydown = ((a) => {
        btn.onclick = (() => {
            console.log('12333')
            message = ipt.value;
                if (message != '') {
                    fn()
                }
        })
        if (a.keyCode == 13) {
            message = ipt.value;
                if (message != '') {
                    fn()
                }
        }
    })
    // 事件源e.target 事件委托的好处是减少内存消耗 提高性能
    ul.onclick = ((e) => {
        console.log('123')
        console.log(e.target)
        console.log(e.target.tagName)
        // let BUTTON = e.target.tagName;
        if (e.target.tagName == 'BUTTON') {
            e.target.parentNode.remove();
        }
    })
</script>
</body>
</html>

西红柿炒番茄@ZXR

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
原生JS使用事件委托实现留言板

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>留言框demo</title></head><body><input type="text" id="ipt"><button id="btn">ADD</button><ul id="list">
复制链接

扫一扫