根据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!");
}

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

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漏洞。

简介:

addEventListener可以添加多个事件，而onclick则不能这样做。 onclick可以作为HTML属性添加，而addEventListener只能添加在<script>元素中。 addEventListener可以接受第三个参数，该参数可以停止事件传播。

两者都可用于处理事件。然而，addEventListener应该是首选的选择，因为它可以做onclick做的所有事情，甚至更多。不要使用内联onclick作为HTML属性，因为这会混淆javascript和HTML，这是一个坏的做法。它使代码更难维护。

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

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

元素。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")
})