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

问题 在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); }; }; }; }

最后就放一个邋遢的效果图。 我是一个成长的小白，每天进步一点点把，虽然不知道能坚持到什么时候！ 不懂就评价问总有大神帮我们解答嘻嘻；