问addEventListener vs onclick

EN

虽然onclick可以在所有浏览器中运行，但addEventListener不能在使用attachEvent的Internet Explorer的旧版本中运行。

onclick的缺点是只能有一个事件处理程序，而其他两个将触发所有已注册的回调函数。

据我所知，DOM "load“事件仍然只能起到非常有限的作用。这意味着它只会为window object、images和<script>元素触发。直接onload赋值也是如此。这两者在技术上没有区别。可能.onload =有更好的跨浏览器可用性。

但是，您不能将load event分配给<div>或<span>元素等。

Javascript倾向于将所有东西混合到对象中，这会使它变得混乱。All is是JavaScript方式。

从本质上讲，onclick是一个HTML属性。相反，addEventListener是DOM对象上表示HTML元素的方法。

在JavaScript对象中，方法只是一个属性，它有一个函数作为值，并针对它所附加的对象工作(例如使用这个)。

在JavaScript中，由DOM表示的HTML元素将把它的属性映射到它的属性。

这就是人们感到困惑的地方，因为JavaScript将所有东西整合到一个容器或名称空间中，没有间接层。

在一个普通的OO布局中(至少合并了属性/方法的命名空间)，你可能会有类似这样的东西：

domElement.addEventListener // Object(Method)
domElement.attributes.onload // Object(Property(Object(Property(String))))

有一些变体，比如它可以为onload使用getter/setter，或者为属性使用HashMap，但最终它看起来就是这样。JavaScript消除了这种间接层，因为它希望知道什么是什么以及其他事情。它将domElement和属性合并在一起。

为了避免兼容性，您应该使用addEventListener作为最佳实践。由于其他答案谈到了这方面的差异，而不是根本的方案差异，我将放弃这一点。从本质上讲，在理想情况下，您实际上只能在HTML中使用on*，但在更理想的情况下，您不应该在HTML中执行类似的操作。

为什么它会在今天占据主导地位？它写起来更快，更容易学习，而且更容易工作。

onload在HTML语言中的全部意义在于首先提供对addEventListener方法或功能的访问。通过在JS中使用它，您可以在可以直接应用它的时候使用HTML。

假设您可以创建自己的属性：

$('[myclick]').each(function(i, v) {
     v.addEventListener('click', function() {
         eval(v.myclick); // eval($(v).attr('myclick'));
     });
});

JS的用法与此略有不同。

您可以将其等同于以下内容(对于创建的每个元素)：

element.addEventListener('click', function() {
    switch(typeof element.onclick) {
          case 'string':eval(element.onclick);break;
          case 'function':element.onclick();break;
     }
});

实际的实现细节可能会因一系列细微的变化而有所不同，这使得两者在某些情况下略有不同，但这就是要点。

可以说，这是一种兼容性技巧，因为在默认情况下，属性都是字符串，所以可以将函数绑定到on属性。