在前端开发中，我们需要对用户的交互事件做出响应。onclick 和 addEventListener 都是用于处理 HTML 元素的事件的方式。
onclick
onclick 是一个 HTML 属性，它可以在元素上设置一个单击事件处理程序函数。这意味着每当用户单击这个元素时，该函数将被调用。
下面是一个示例代码：
<button onclick="alert('Hello World!')">Click me</button>这将在单击按钮时显示一个警告框，并显示“Hello World!”的消息。
虽然 onclick 看起来很简单，但有一些缺点。如果有多个事件处理程序要执行，或者您想要动态地添加或删除处理程序，则使用 onclick 可能会非常棘手。
addEventListener
相比较之下，addEventListener 是更为灵活和强大的方式。它允许您动态添加或移除事件处理程序，并且可以处理多个事件处理程序。此外，通过 addEventListener 您可以添加自定义事件类型。
下面是一个示例代码：
<button id="myButton">Click me too!</button>
const button = document.getElementById('myButton');
function handleClick() {
alert('You clicked the button!');
}
button.addEventListener('click', handleClick);这段代码将在页面上找到一个 ID 为 "myButton" 的按钮元素，并将一个名为 handleClick 的函数附加到其点击事件上。每次单击按钮时，将显示一个警告框，并显示“您单击了按钮！”的消息。
总结
虽然 onclick 可以简单快速地处理简单的点击事件，但是如果您需要更多的灵活性和控制，请使用 addEventListener。
在编写 JavaScript 时，请尽量避免混合使用这两种方法，因为可能会导致难以调试和维护的代码。
实践建议
当您需要在多个页面或组件中使用相同的事件处理程序时，将其封装到一个函数中，并使用 addEventListener 动态添加它。
-- -------------------- ---- ------- -------- ------------- - ---------- ------- --- ---------- - ----- ------- - --------------------------------------- --- ------ ------ -- -------- - -------------------------------- ------------- -
这段代码使用 querySelectorAll 来查找所有 class 属性为 "myButton" 的元素，并动态将 handleClick 函数添加到它们的点击事件上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8179
