eventListener('click') 方法和 Javascript 中的 onclick 属性之间的确切区别是什么？

Question

我正在构建一个简单的待办事项项目，用户可以在其中输入项目并将项目添加到列表中，也可以删除任何项目。为了删除项目，用户可以单击删除图标，然后可以通过弹出窗口确认删除。现在，我将一个 eventListener 附加到项目列表，它会检查用户是否单击了任何特定列表项目的删除按钮。如果是，则会出现一个弹出窗口。现在我想监听弹出窗口中 'confirm' 按钮的点击事件。我首先尝试通过将 eventListener 附加到按钮来做到这一点：

entryList.addEventListener('click', e=> {
    let node = e.target.parentNode;
    if(e.target.classList.contains('delete')){
        popup.style.display = 'block';
        button.addEventListener('click', ()=> {
            popup.style.display = 'none';
            node.remove()
     })
    }
    
})

这给出了一个响应，如果我没有确认删除但随后删除了列表中的另一个项目，我之前没有确认删除的所有项目都会被删除。例如，如果我点击了项目 5 的删除按钮，然后清除了弹出窗口，然后点击了项目 4 的删除按钮并确认，那么项目 4 和 5 都会从列表中删除。

在同样的问题中，如果我改为使用 onclick 属性作为按钮，如下所示：

entryList.addEventListener('click', e=> {
    let node = e.target.parentNode;
    if(e.target.classList.contains('delete')){
        popup.style.display = 'block';
        button.onclick = ()=>{
            popup.style.display = 'none';
            node.remove()
        }
    }
})

我得到了想要的输出。

为什么代码片段显示不同的输出以及 onclick 属性和 click eventListener 之间的确切区别是什么？

Answer 1

该代码的不同之处在于，当您使用 addEventListener 时，您是在添加一个事件处理程序，它不会对任何其他事件处理程序执行任何操作已经添加。因此，在您的第 5 项和第 4 项示例中，单击按钮时，两个处理程序都会被调用。

相比之下，当您分配给 onclick 时，您替换 onclick 属性上的任何先前处理程序一个新的（就像任何其他作业一样），所以以前的作业已经不存在了。

有了更完整的上下文，我们可能会向您展示如何完全避免动态附加处理程序，但如果您使用 addEventListener，最小的变化是记住该函数并在您不再需要时调用 removeEventListener想要调用该处理程序。

eventListener('click') 方法和 Javascript 中的 onclick 属性之间的确切区别是什么？

What are the exact differences between an eventListener('click') method and the onclick property in Javascript?

javascript

dom

onclick

event-handling

addeventlistener

eventListener('click') 方法和 Javascript 中的 onclick 属性 之间的确切区别是什么？

What are the exact differences between an eventListener('click') method and the onclick property in Javascript?

javascript

dom

onclick

event-handling

addeventlistener

eventListener('click') 方法和 Javascript 中的 onclick 属性之间的确切区别是什么？