JavaScript 中 addEventListener 和 on-click 之间的区别

javascriptweb developmentfront end technology

addEventListener 和 on-click 事件都监听事件。这两种事件方法都会记录事件，并在每次单击按钮时根据该事件执行函数。尽管这两种事件的工作方式有所不同。

在本文中，我们将探讨 JavaScript 中 addEventListener 和 on-click 函数之间的区别。

1. addEventListener

addEventListener 方法使用事件处理程序将其附加到指定元素

语法

element.addEventListener(event, listener, useCapture);

参数

event −事件可以定义为任何有效的 JavaScript 事件。事件通常不带 on 前缀使用(如 onclick 方法中所使用的)。
Listener (处理程序函数) − 这定义了一个响应发生的事件的 JavaScript 函数。
useCapture(可选参数) − 这是一个可选参数，它采用可选值来指定事件是否应在捕获阶段或冒泡阶段执行。

示例 1

下面的示例程序显示 addEventListener 方法可以支持应用于同一元素的多个事件处理程序。

# index.html

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: green;">
      Welcome to Tutorials Point
   </h1>
   <button id="btn">Click here</button>
   <h3 id="text1"></h3>
   <h3 id="text2"></h3>
   <script>
      let btn_element = document.getElementById("btn");
      btn_element.addEventListener("click", () => {
         document.getElementById("text1")
            .innerHTML = "Executed Task 1";
      })
      btn_element.addEventListener("click", () => {
         document.getElementById("text2")
            .innerHTML = "Executed Task 2";
      });
   </script>
</body>
</html>

输出

当您点击“单击此处”按钮时，它将显示‘已执行任务 1’、‘已执行任务 2’。

2. onClick()

onClick() 事件捕获单击事件，然后调用所需的函数。 onClick 事件仅向元素添加单个事件。

示例 2

下面的示例程序显示我们无法通过 onClick() 控制事件传播。此外，它可以作为 HTML 属性添加。

# filter.js

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <button id="btn">Click here</button>
   <h3 id="text1"></h3>
   <h3 id="text2"></h3>
   <script>
      let btn_element = document.getElementById("btn");
      btn_element.onclick = () => {
         document.getElementById("text1")
            .innerHTML = "Executed Task 1";
      };
      btn_element.onclick = () => {
         document.getElementById("text2")
            .innerHTML = "Executed Task 2";
      };
   </script>
</body>
</html>