三行代码  ›  专栏  ›  技术社区  ›  inrittik

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

  •  0
  • inrittik  · 技术社区  · 5 天前

    我正在构建一个简单的todos项目,用户可以在其中输入项目并将其添加到列表中,还可以删除任何项目。要删除项目,用户可以单击删除图标,然后通过弹出窗口确认删除。 现在,我将eventListener附加到项目列表中,它检查用户是否单击任何特定列表项目的delete按钮。如果是,则会出现一个弹出窗口。

    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之间的确切区别是什么?

    1 回复  |  直到 5 天前
        1
  •  0
  •   T.J. Crowder    5 天前

    addEventListener 事件处理程序,它不会对已添加的任何其他事件处理程序执行任何操作。因此,在您的第5项和第4项示例中,当单击按钮时, 处理程序被调用。

    相反,当您将 onclick ,你是 替换 上的任何以前的处理程序 onclick 属性,因此前一个属性不再存在。

    加法器 就是记住函数和调用 removeEventListener 当您不再需要调用该处理程序时。