关于JS动态创建元素监听事件委托及遇到的问题

最新推荐文章于 2024-09-08 19:46:36 发布

ita_code

最新推荐文章于 2024-09-08 19:46:36 发布

阅读量519

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43490372/article/details/107110117

版权

问题
在Js基础课上类似操作Dom评价的案例遇到的一个动态创建元素获取不到的问题，当时没考虑用委托事件。

当这样写的时候怎么也获取不到！这必须用到事件委托的方式后面有解决办法

<div>
    <textarea id="tfff" rows="10" cols="10"
              placeholder="请输入你的评价"></textarea>
    <input type="button" id="fbtn" value="发表">
</div>
<div id="evaluate"></div>

<script>
    window.onload = function () {
        var tff = document.getElementById('tfff');
        var fbtn = document.getElementById('fbtn');
        var evaluate = document.getElementById('evaluate');
        fbtn.onclick = function () {
            if (tff.value.length == 0) {
                alert("请输入内容呀");
                tff.focus();
                return;
            }
            var s_p = document.createElement("p");
            s_p.innerHTML = tff.value + "<span>删除</span>";
            con.appendChild(s_p);
            tff.value = "";
        };
        var ia = document.getElementsByTagName("span");
        for (let x = 0; x < ia.length; x++) {
            ia[x].onclick = function () {
                this.parentNode.parentNode.removeChild(this.parentNode);
            };
        }
        ;

    }

</script>

动态监听事件委托的方式解决

window.onload = function () {
        var tff = document.getElementById('tfff');
        var fbtn = document.getElementById('fbtn');
        var evaluate = document.getElementById('evaluate');
        fbtn.onclick = function () {
            if (tff.value.length == 0) {
                alert("请输入内容呀");
                tff.focus();
                return;
            }
            var s_p = document.createElement("p");
            s_p.innerHTML = tff.value + "<span>删除</span>";
            evaluate.appendChild(s_p);
            tff.value = "";
        };
        //父元素,子元素操作删除事件,注释掉的方法好像不是委托事件,之前学jquery老用这个方法删除元素
         evaluate.addEventListener('click', function (e) {
            // var span = document.getElementsByTagName("span")[0];
            // span.setAttribute('class', 'del');
            // var del = document.getElementsByClassName('del')[0];
            // del.parentNode.parentNode.removeChild(del.parentNode);
            e = e || window.event;
            var target=e.target||e.srcElement;
            evaluate.removeChild(target.parentNode);
        })
    }

最后一种解决方式就是在创建新元素的节点的下面写事件这样也是解决的

window.onload = function () {
        var tff = document.getElementById('tfff');
        var fbtn = document.getElementById('fbtn');
        var evaluate = document.getElementById('evaluate');
        fbtn.onclick = function () {
            if (tff.value.length == 0) {
                alert("请输入内容呀");
                tff.focus();
                return;
            }
            var s_p = document.createElement("p");
            s_p.innerHTML = tff.value + "<span>删除</span>";
            con.appendChild(s_p);
            tff.value = "";
            var ia = document.getElementsByTagName("span");
            for (let x = 0; x < ia.length; x++) {
                ia[x].onclick = function () {
                    this.parentNode.parentNode.removeChild(this.parentNode);
                };
            };
        };
    }