一个细节还没有被注意到:现代桌面浏览器将不同的按钮按下视为AddEventListener的“单击”(默认为“单击”和“onclick”)。

在Chrome 42和IE11上，onclick和AddEventListener都单击左边的fire和中间的click。 在Firefox 38上，onclick只在左键点击时触发，但AddEventListener点击在左、中、右击时触发。

此外，当使用滚动游标时，中键点击行为在浏览器中非常不一致:

在Firefox上，中键单击事件总是会触发。 在Chrome浏览器上，如果中间点击打开或关闭滚动光标，它们不会触发。 在IE上，它们会在滚动光标关闭时触发，但不会在打开时触发。

同样值得注意的是，任何键盘可选择的HTML元素(如input)的“click”事件也会在元素被选中时触发空格或enter。

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。

在我的Visual Studio代码中，addEventListener对事件有真实的智能感知

但onclick没有，只有假的

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

如果你不太担心浏览器的支持，有一种方法可以在事件调用的函数中重新绑定'this'引用。它通常指向在函数执行时生成事件的元素，这并不总是您想要的。棘手的部分是同时能够删除相同的事件侦听器，如本例所示:http://jsfiddle.net/roenbaeck/vBYu3/

/*
    Testing that the function returned from bind is rereferenceable, 
    such that it can be added and removed as an event listener.
*/
function MyImportantCalloutToYou(message, otherMessage) {
    // the following is necessary as calling bind again does 
    // not return the same function, so instead we replace the 
    // original function with the one bound to this instance
    this.swap = this.swap.bind(this); 
    this.element = document.createElement('div');
    this.element.addEventListener('click', this.swap, false);
    document.body.appendChild(this.element);
}
MyImportantCalloutToYou.prototype = {
    element: null,
    swap: function() {
        // now this function can be properly removed 
        this.element.removeEventListener('click', this.swap, false);           
    }
}

上面的代码在Chrome上运行得很好，并且可能有一些关于“绑定”与其他浏览器兼容的问题。