如何通过点击事件调用 JavaScript 函数？

要在 JavaScript 中通过点击事件调用函数，您可以使用 `addEventListener` 方法或 `onclick` 事件属性。`addEventListener` 方法是将事件处理程序附加到 DOM 元素的通用方法，它允许您指定事件和在事件发生时调用的回调函数。

`onclick` 属性是一个特定的事件属性，允许您指定在单击元素时调用的 JavaScript 函数。这两种方法都允许您指定在单击元素时调用的函数，但 `addEventListener` 方法更灵活，可用于任何类型的事件，而 `onclick` 属性特定于单击事件。

要使用 `addEventListener` 方法，您需要使用 DOM API 获取元素，然后在其上调用 `addEventListener` 方法，传入事件名称和回调函数作为参数。

要使用 `onclick` 属性，您只需在 HTML 元素中将要调用的函数指定为属性的值。

使用 addEventListener() 方法添加点击事件

`addEventListener()` 方法用于将事件处理程序附加到任何 DOM 元素。此方法的语法如下。

语法

element.addEventListener( event, function, capture )

参数值

  • 事件 - 您想要应用于元素的事件名称，例如 click、mouseover、submit 等。

  • 函数 - 事件发生后将触发的回调函数。

  • 捕获 - 是否应在捕获阶段执行事件。这将检查并显示布尔值；true 或 false。

返回值 - 无

步骤

以下是使用 `addEventListener` 方法将点击事件附加到按钮的步骤：

步骤 1 - 在 HTML body 中，创建一个按钮元素和一个 span 元素来显示计数器值。

步骤 2 - 在脚本中，使用它们的 ID 获取按钮和 span 元素。

步骤 3 - 使用 `element.addEventListener` 方法将“click”事件附加到按钮元素。

步骤 4 - 在事件侦听器的回调函数中，将计数器值增加 1。

步骤 5 - 使用 `parseInt` 函数将计数器值（字符串格式）转换为整数。

步骤 6 - 将新的计数器值赋给 span 元素。

步骤 7 - 在 Web 浏览器中打开 HTML 文件，然后单击按钮以查看计数器值增加。

示例

在这个例子中，我们创建一个带有按钮的计数器，每次点击按钮后，我们都会增加计数器的值。为了监听事件，我们使用 `element.addEventListener` 方法。

<html>
   <body>
      <h2> Using the element.addEventListener() method </h2>
      <p>Click on the button to increase the counter value by one </p>
      <button id="btn">Click me</button>
      <p><b>Counter: </b> <span id="counter">1</span></p>
   </body>
   <script>
      let btn = document.getElementById("btn")
      let counter = document.getElementById("counter")
      
      // Apply the addEventListener method
      btn.addEventListener("click", myFunc)
      
      // Defining the myFunc function
      function myFunc() {
      
         // Increase the existing value by 1      
         // Use the parseInt method to convert the existing      
         // value (which is in string format) into integer
         counter.innerText = parseInt(counter.innerText) + 1
      }
   </script>
</html>

使用事件监听器属性

浏览器允许我们从 HTML 本身触发事件。HTML 元素有一些事件属性，例如 onClick、onMouseOver、onSubmit 等。为了在这些事件触发后执行任何操作，我们为其分配一些 JavaScript 代码或调用 JavaScript 函数。

示例

在这个例子中，我们创建一个带有按钮的计数器，每次点击按钮后，我们都会增加计数器的值。为了监听事件，我们使用 `onclick` 属性。

<html>
   <body>
      <h2> Using the onclick event attribute</h2>
      <p>Click on the button to increase the counter value by one </p>
      <button id="btn" onclick="increseCounter()">Click me</button>
      <p> <b>Counter: </b> <span id="counter">0</span> </p>
   </body>
   <script>
      function increseCounter() {
      
         // Get the button element
         let btn = document.getElementById("btn")
      
         // Get the counter element
         let counter = document.getElementById("counter")
      
         // Increase the existing value by 1      
         // Use the parseInt method to convert the existing      
         // value (which is in string format) into integer
         counter.innerText = parseInt(counter.innerText) + 1
      }
   </script>
</html>

在本教程中，我们学习了如何在 JavaScript 中通过点击事件调用函数。有两种方法可以为任何元素添加点击事件，第一种是使用 `addEventListener` 方法，另一种是使用 `onclick` 事件属性。

更新于：2023年1月6日

22K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告