调用 addEventListener() 与将事件 + 函数添加到 HTML 标签有什么区别[重复]

【问题标题】：What is the difference between calling addEventListener() vs. adding the event + function into the HTML tag [duplicate]调用 addEventListener() 与将事件 + 函数添加到 HTML 标签有什么区别[重复]
【发布时间】：2021-05-29 02:09:12
【问题描述】：

在你的 Javascript 代码中使用 addEventListener() 有什么区别，比如这个例子：

Array.from(document.querySelectorAll('.element')).forEach(el => {
    el.addEventListener('ondrop', drop);
});

直接在 HTML 标签中调用函数？

<div class="element" ondrop="drop(event)"></div>
<div class="element" ondrop="drop(event)"></div>
<div class="element" ondrop="drop(event)"></div>

【问题讨论】：

除了明显的语法和实际添加事件的时间之外，我不确定是否还有其他原因。

标签： javascript

【解决方案1】：

addEventListener 可以添加多个事件，而 onclick 无法做到这一点。
onclick 可以作为 HTML 属性添加，而 addEventListener 只能在 <script> 元素中添加。
addEventListener 可以采用第三个参数来阻止事件传播。

两者都可以用来处理事件。但是，addEventListener 应该是首选，因为它可以完成 onclick 所做的一切，甚至更多。不要使用内联 onclick 作为 HTML 属性，因为这会混淆 javascript 和 HTML，这是一种不好的做法。它使代码的可维护性降低。

【讨论】：

这不是特定于 onclick，但谢谢！
这个问题没有提到onclick，但你的观点仍然有效。
我告诉onclick 一般