我想Chris Baker在一个很好的答案中总结了它，但我想添加到addEventListener()中，你也可以使用options参数，它可以让你更好地控制你的事件。例如，如果你只想运行你的事件一次，那么你可以在添加事件时使用{once: true}作为一个选项参数，只调用它一次。

    function greet() {
    console.log("Hello");
    }   
    document.querySelector("button").addEventListener('click', greet, { once: true })

上面的函数只打印“Hello”一次。 此外，如果你想清理你的事件，那么还有removeEventListener()选项。虽然使用addEventListener()有优点，但如果您的目标受众使用Internet Explorer，则此方法可能并不适用于所有情况，您仍然应该小心。你也可以在MDN上读到addEventListener，他们对如何使用它们给出了很好的解释。

根据MDN，差异如下:

addEventListener:

EventTarget.addEventListener()方法添加指定的 对象的事件侦听器列表中的 在调用它的EventTarget上指定的事件类型。的 事件目标可以是文档中的一个元素，文档本身，一个 窗口或任何其他支持事件的对象(例如 XMLHttpRequest)。

onclick:

属性上的单击事件处理程序代码 当前元素。当使用click事件触发操作时，也是如此 考虑将相同的操作添加到keydown事件，以允许 不使用鼠标或触摸的人使用相同的动作 屏幕上。语法元素。onclick = functionRef;where functionRef是a 函数——通常是在别处声明的函数名或函数名 表达式。详见“JavaScript指南:函数”。

在使用中也有语法差异，你可以在下面的代码中看到: addEventListener:

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

onclick:

function initElement() {
    var p = document.getElementById("foo");
    // NOTE: showAlert(); or showAlert(param); will NOT work here.
    // Must be a reference to a function name, not a function call.
    p.onclick = showAlert;
};

function showAlert(event) {
    alert("onclick Event detected!");
}

虽然onclick可以在所有浏览器中工作，但addEventListener不能在旧版本的Internet Explorer中工作，后者使用attachEvent代替。

onclick的缺点是只能有一个事件处理程序，而其他两个将触发所有注册的回调。

如果你有另外两个函数，你可以看到区别:

var h = document.getElementById('a');
h.onclick = doThing_1;
h.onclick = doThing_2;

h.addEventListener('click', doThing_3);
h.addEventListener('click', doThing_4);

函数2、3和4可以工作，但函数1不行。这是因为addEventListener不会覆盖现有的事件处理程序，而onclick会覆盖任何现有的onclick = fn事件处理程序。

当然，另一个重要的区别是onclick总是可以工作，而addEventListener在版本9之前的ie中不能工作。你可以在IE <9中使用类似的attachEvent(语法略有不同)。

使用内联处理程序与内容安全策略不兼容，因此addEventListener方法从这个角度来看更安全。当然，您可以使用unsafe-inline来启用内联处理程序，但是，顾名思义，它并不安全，因为它会带来CSP阻止的大量JavaScript漏洞。

一个元素对每种事件类型只能有一个事件处理程序，但可以有多个事件监听器。

那么，它的实际情况如何呢?

只有最后分配的事件处理程序才会运行:

const button = document.querySelector(".btn")
button.onclick = () => {
  console.log("Hello World");
};
button.onclick = () => {
  console.log("How are you?");
};
button.click() // "How are you?" 

所有事件监听器将被触发:

const button = document.querySelector(".btn")
button.addEventListener("click", event => {
  console.log("Hello World");
})
button.addEventListener("click", event => {
  console.log("How are you?");
})
button.click() 
// "Hello World"
// "How are you?"

IE注:attachEvent不再支持。从IE 11开始，使用addEventListener: docs。