Javascript 在EventListener、Onlick和内联函数之间选择？

我正在制作一个需要在javascript中添加函数的应用程序。 我对这两件事感到困惑

document.querySelector('.foo').addEventListener('click',function(){
    alert('you clicked!')
})

Vs

昂立克

document.querySelector('.foo').onclick = function(){
    alert('you clicked!')
}

Vs

在html中调用的内联函数

<button onclick="you_clicked();">Click Here</button>

这是最佳实践吗？ 当eventListener向浏览器添加负载时，我是否必须删除它

2.我在某个地方读到，从html调用函数是一种糟糕的做法。。就想这样吗

使用jQuery这样的框架很容易做到这一点，但是我想在普通javascript上编写代码

---

我想做一个安全和优化的应用程序，所以需要你们的建议。提前感谢您。

当您需要将多个事件附加到一个对象时，请使用

addEventListener

，因为

onClick

会覆盖其中的内容。您应该在单独的文件中初始化业务逻辑，并在需要时调用它们，这样它们就不会未定义。我会在JS中初始化事件，将它们保存在一个中心位置，而不必通过html查看事件的附加位置

if(document.querySelector('.foo')){
    document.querySelector('.foo').addEventListener('click',function(){
        alert("You Clicked!")
    })
}