我想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，他们对如何使用它们给出了很好的解释。

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

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(语法略有不同)。

也可以通过对侦听器进行原型化(如果我们有对它的引用，而且它不是匿名函数)来扩展侦听器，或者使onclick调用成为对函数库的调用(函数调用其他函数)。

如:

elm.onclick = myFunctionList;
function myFunctionList(){
    myFunc1();
    myFunc2();
}

这意味着我们永远不需要改变onclick调用，只需要改变myFunctionList()函数来做任何我们想做的事情，但这让我们无法控制冒泡/捕获阶段，所以应该避免在新浏览器中使用。

onclick基本上是一个addEventListener，当元素被单击时，它专门执行一个函数。当你有一个做简单操作的按钮时，它很有用，比如计算器按钮。addEventlistener可以用于很多事情，比如在加载DOM或所有内容时执行一个操作，类似于window。Onload，但有更多的控制。

注意，实际上可以使用内联使用多个事件，或者至少可以使用onclick，用分号分隔每个函数，例如....

我不会写一个内联函数，因为你可能会有潜在的问题，这将是混乱的imo。只需使用它来调用脚本文件中已经完成的函数。

你用哪一个取决于你想要什么。addEventListener用于复杂操作，onclick用于简单操作。我见过一些项目没有为元素附加一个特定的事件监听器，而是实现了一个更全局的事件监听器，它将确定是否点击了按钮，并根据所按的按钮执行某些任务。在我看来，这可能会导致潜在的问题，尽管很小，可能，资源浪费，如果事件监听器必须处理每一个点击

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

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

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

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。

let element = document.queryselector('id or classname'); 
element.addeventlistiner('click',()=>{
  do work
})

<button onclick="click()">click</click>`
function click(){
  do work
};