简介:

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

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

addEventListener允许您设置多个处理程序，但在IE8或更低版本中不支持。

IE确实有attachEvent，但它并不完全相同。

简介:

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

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

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

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

我想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!");
}