使用addEventListener或onclick以提高性能是否更有效？

Question

我只使用JavaScript,没有jQuery.

<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>

VS

document.addEventListener('click', function () {
    //code here
});

Answer 1

与onclick相比,addEventListner会更快.您可以通过运行测试来查看以下链接以获取性能详细信息.

http://jsperf.com/click-vs-addeventlistener/9

有关使用它们的更多详细信息,请查看以下链接.

addEventListener vs onclick

Answer 2

1. 通过使用“onclick”，您将 Javascript 和 HTML 混合在一起，这不被
   认为是一个好的做法，因为它不可扩展。考虑在示例中动态添加、插入、删除元素。HTML 描述结构，CSS 描述样式，JavaScript 控制行为。

2. 如果您还没有看过 事件委托：事件委托允许您避免将事件侦听器添加到特定节点，而是将事件侦听器添加到一个父节点。

因此，addEventListener对于事件委托将是一个不错的选择