如何在 JavaScript HTML DOM 中添加事件处理程序？

本教程将讲解如何在 JavaScript 中为元素添加事件处理程序。有两种方法可以为任何元素添加事件处理程序，第一种是使用 addEventListener 方法，另一种是使用事件属性。

使用 addEventListener() 方法

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

语法

element.addEventListener( event, function, capture )

参数

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

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

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

返回值：无

示例 1

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

<html>
<head>
   <title>Example -add an event handler to an element in JavaScript HTML DOM </title>
</head>
<body>
   <h2> Adding an event handler to an element in JavaScript HTML DOM 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">0</span>
   </p>
</body>

<script>
   // Get the button element
   let btn = document.getElementById("btn")
   
   // Get the counter element
   let counter = document.getElementById("counter")
   
   // Apply the addEventListener method
   btn.addEventListener("click", () => {
      
      // 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 函数。

示例 2

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

<html>
<head>
   <title>Example program -add an event handler to an element in JavaScript HTML DOM </title>
</head>
<body>
   <h2> Adding an event handler to an element in JavaScript HTML DOM using the 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 HTML DOM 中为元素添加事件处理程序的方法。第一种方法是使用 addEventListener() 方法，第二种方法是使用事件属性。

更新于：2022年8月22日

2K+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告