无法为JavaScript动态创建的li元素添加事件监听器如何解决？

有两种常用实现方式，优先推荐使用事件委托方案，HTML代码无需做任何修改，只需调整JS逻辑即可： #

方案1：创建li元素时直接绑定双击事件 #

在创建新li节点的逻辑中直接绑定双击事件，修改后的JS代码如下：

// Declaring Variables
let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// Adding Function to Add New task  
function getVal() {
    let value = inputbtn.value;
    if (value === "") {
        alert("Please fill out this field.")
    }
    else {
        let newElement = document.createElement('li')
        let liText = document.createTextNode(value)
        newElement.appendChild(liText)
        // 新增双击删除事件绑定
        newElement.addEventListener('dblclick', () => {
            newElement.remove()
        })
        list.appendChild(newElement)
    }
    document.myForm.reset()
}

方案2：事件委托（更推荐） #

将事件绑定在静态存在的父元素ul上，利用事件冒泡机制实现对所有动态生成li的事件监听，无需每次创建元素重复绑定，性能更优：

// Declaring Variables
let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// 父级绑定双击事件，适配所有动态子元素
list.addEventListener('dblclick', (e) => {
    // 校验触发事件的元素是否为li节点
    if(e.target.tagName === 'LI') {
        e.target.remove()
    }
})
// Adding Function to Add New task  
function getVal() {
    let value = inputbtn.value;
    if (value === "") {
        alert("Please fill out this field.")
    }
    else {
        let newElement = document.createElement('li')
        let liText = document.createTextNode(value)
        newElement.appendChild(liText)
        list.appendChild(newElement)
    }
    document.myForm.reset()
}

内容的提问来源于stack exchange，提问作者Mohit Kumar Patel