如何在 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-08-22

2K+ 瀏覽量

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告