JavaScript addEventListener 和 onclick的区别

addEventListener() 和 onclick 都是用来监听事件的。当点击按钮时，两者都可以执行一个回调函数。然而，它们并不相同。在本文中，我们将了解它们之间的区别。

addEventListener() : addEventListener() 方法将一个事件处理程序附加到指定的元素上。可以向单个元素添加任意数量的事件处理程序，而不会覆盖现有的事件处理程序。

语法：

element.addEventListener(event, listener, useCapture);

参数：

event： 事件可以是任何有效的JavaScript事件。事件使用时不需要前缀“on”，比如使用“click”而不是“onclick”，使用“mousedown”而不是“onmousedown”。
listener（处理函数）： 可以是一个JavaScript函数，响应发生的事件。
useCapture： （可选参数）一个布尔值，指定事件应该在捕获阶段还是冒泡阶段执行。

注意： addEventListener()方法可以给同一个元素应用多个事件处理程序。它不会覆盖其他事件处理程序。

示例： 下面是一个JavaScript代码示例，展示了一个元素与多个事件相关联且没有覆盖的情况。

HTML

<body>
  <button id="btn">Click here</button>
  <h1 id="text1"></h1>
  <h1 id="text2"></h1>
 
  <script>
    let btn_element = document.getElementById("btn");
 
    btn_element.addEventListener("click", () => {
      document.getElementById("text1")
        .innerHTML = "Task 1 is performed";
    })
 
    btn_element.addEventListener("click", () => {
      document.getElementById("text2")
        .innerHTML = "Task 2 is performed";
    });
  </script>
</body>

输出结果：

JavaScript addEventListener 和 onclick的区别

onclick : 单击事件记录点击活动，然后调用所需的函数，onClick事件只向元素添加一个事件。

语法:

在HTML中：

<element onclick="myScript">

在JavaScript中：

object.onclick = function(){myScript};

onclick 属性只是一个属性。就像所有对象属性一样，如果我们写入多个属性，它将被覆盖。

示例： 下面是一个JavaScript代码，显示元素不能关联多个事件，因为有覆盖。

HTML

<body>
  <button id="btn">Click here</button>
  <h1 id="text1"></h1>
  <h1 id="text2"></h1>
 
  <script>
    let btn_element = document.getElementById("btn");
 
    btn_element.onclick = () => {
      document.getElementById("text1")
        .innerHTML = "Task 1 is performed";
    };
 
    btn_element.onclick = () => {
      document.getElementById("text2")
        .innerHTML = "Task 2 is performed";
    };
  </script>
</body>

输出：

JavaScript addEventListener 和 onclick的区别

addEventListener和onclick之间的区别：

addEventListener	onclick
addEventListener可以添加多个事件到一个特定的元素中。	onclick只能为一个元素添加一个事件。它基本上是一个属性，所以会被覆盖。
addEventListener可以接受第三个参数来控制事件的传播。	onclick不能控制事件的传播。
addEventListener只能在`<script>`标签中或外部的JavaScript文件中添加。	onclick还可以作为HTML属性添加。
addEventListener在旧版本的Internet Explorer中不起作用，而在该版本中使用attachEvent来替代。	onclick在所有浏览器中都有效。