如何在 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+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告