Javascript addEventListener和onclick的区别用法及代码示例

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

addEventListener()

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

用法:

element.addEventListener(event, listener, useCapture);

参数：

event:事件可以是任何有效的 JavaScript 事件。使用事件时不带 “on” 前缀，例如使用 “click” 代替 “onclick” 或使用 “mousedown” 代替 “onmousedown”。
监听器(处理函数)：它可以是响应发生的事件的 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>

输出：

onclick事件

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

用法:

onclick

<element onclick="myScript">

在 JavaScript 中：

object.onclick = function(){myScript};

单击时只是一个属性。与所有对象属性一样，如果我们写入多个属性，它就会被覆盖。

例子：下面是一段 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>

输出：

addEventListener 和 onclick 的区别

添加事件监听器	单击时
addEventListener 可以向特定元素添加多个事件。	onclick 只能向元素添加单个事件。它本质上是一个属性，因此会被覆盖。
addEventListener 可以采用第三个参数来控制事件传播。	onclick 无法控制事件传播。
addEventListener 只能添加到 <script> 元素或外部 JavaScript 文件中。	onclick 也可以添加为 HTML 属性。
addEventListener 在旧版本的 Internet Explorer 中不起作用，它使用 AttachEvent 代替。	onclick 适用于所有浏览器。

相关用法

注：本文由纯净天空筛选整理自ArifShaikh大神的英文原创作品 Difference between addEventListener and onclick in JavaScript。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。