元素。Onclick = function() {/* do stuff */} 元素。addEventListener('click'， function(){/* do stuff */}，false);

它们显然做同样的事情:监听click事件并执行回调函数。然而，它们是不相等的。如果你需要在两者之间做出选择，这可以帮助你弄清楚哪一个最适合你。

主要的区别是onclick只是一个属性，像所有对象属性一样，如果你写了多次，它将被覆盖。而使用addEventListener()，我们可以简单地将事件处理程序绑定到元素，并且可以在每次需要时调用它，而不用担心任何重写的属性。 例子如下，

试试吧:https://jsfiddle.net/fjets5z4/5/

首先，我想继续使用onclick，因为它更短，看起来更简单，事实上也是如此。但我不建议再使用它了。这就像使用内联JavaScript一样。使用内联JavaScript之类的东西现在是非常不鼓励的(内联CSS也是不鼓励的，但这是另一个话题)。

然而，addEventListener()函数尽管是标准的，但在旧的浏览器(Internet Explorer低于版本9)中不能工作，这是另一个很大的区别。如果您需要支持这些古老的浏览器，您应该遵循onclick方式。但是你也可以使用jQuery(或它的替代品之一):它基本上简化了你的工作，减少了浏览器之间的差异，因此可以节省你很多时间。

var clickEvent = document.getElementByID("onclick-eg");
var EventListener = document.getElementByID("addEventListener-eg");

clickEvent.onclick = function(){
    window.alert("1 is not called")
}
clickEvent.onclick = function(){
    window.alert("1 is not called, 2 is called")
}

EventListener.addEventListener("click",function(){
    window.alert("1 is called")
})
EventListener.addEventListener("click",function(){
    window.alert("2 is also called")
})

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

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

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

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

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

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

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

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

你也应该考虑eventdelegate ! 因此，我更喜欢addEventListener，最重要的是小心谨慎地使用它!

事实:

eventlistener是沉重的....(客户端内存分配) 事件在与DOM的关系中传播IN，然后再次传播OUT 树。也被称为涓滴式和冒泡式，读一读 以防你不知道。

想象一个简单的例子: 一个简单的按钮内部div内部主体… 如果你点击按钮，一个事件将无论如何 滴入到BUTTON，然后再OUT，像这样:

window-document-div-button-div-document-window

在浏览器后台(比如JS引擎的软件外围)，浏览器只能对点击做出反应，如果它检查了每一次点击的目标位置。

为了确保每个可能的事件监听器都被触发，它必须从文档级别一直发送“点击事件信号”到元素中。然后再回来。 这个行为可以通过附加eventlistener来使用，例如:

document.getElementById("exampleID").addEventListener("click",(event) => {doThis}, true/false);

请注意，作为addEventListener方法最后一个参数的true/false控制了何时识别事件的行为——何时流入或何时流出。

TRUE表示事件在传入时被识别 FALSE表示事件在冒泡输出的过程中被识别

实现以下2个有用的概念，使用上述方法处理问题也会更加直观:

You can also use event.stopPropagation() within the function (example ref. "doThis") to prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, you could use event.preventDefault() within the function (example ref. "doThis"). With that you could for example tell the Browser that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

还需要再次注意这里的参考:addEventListener方法的最后一个参数(true/false)也控制了“. stoppropagation()”的最终效果在哪个阶段生效(涓滴为true或冒头为false)。 所以…如果你将一个带有TRUE标志的EventListener应用到一个元素，并将其与.stopPropagation()方法结合起来，事件甚至不会通过元素的潜在内部子元素

总结一下: 如果你在HTML中使用onClick变体…对我来说有两个缺点:

与addEventListener，你可以附加多个onClick事件到相同的，分别是一个单一的元素，但这是不可能使用onClick(至少这是我坚信到目前为止，如果我错了，请纠正我)。 以下方面也确实值得注意……特别是代码维护部分(到目前为止还没有详细说明):

In regards to event delegation, it really boils down to this. If some other JavaScript code needs to respond to a click event, using addEventListener ensures you both can respond to it. If you both try using onclick, then one stomps on the other. You both can't respond if you want an onclick on the same element. Furthermore, you want to keep your behavior as separate as you can from the HTML in case you need to change it later. It would suck to have 50 HTML files to update instead of one JavaScript file. (credit to Greg Burghardt, addEventListener vs onclick with regards to event delegation )

这也被称为“Unobtrusive JavaScript”…读一读吧!