為什麼在 JavaScript 中向 'select' 元素新增 addEventListener 不起作用？

當用戶更改元素的值時，<input>、<select> 和 <textarea> 元素會觸發 change 事件。與 input 事件不同，change 事件並非總是針對元素值的每次更改都觸發。

相反，使用 querySelector() 結合 addEventListener()。讓我們逐一討論一下它們是如何工作的。

  • addEventListener() 方法 − addEventListener() 是一個用於為當前元素上的指定事件型別註冊事件處理程式的方法。它允許您指定一個函式，該函式將在指定事件發生在元素上時被呼叫。以下是 addEventListener() 的語法。

target.addEventListener(event, function, useCapture)

  • querySelector() 方法 − 一個元素介面函式，允許我們搜尋文件並返回第一個匹配的元素。當一個元素匹配提供的 CSS 選擇器或選擇器組之一時，就會找到該元素。

    但是，如果未發現匹配的元素，則返回 null。querySelector() 方法僅由 Document 介面使用。以下是 querySelector() 的語法。

    • element = document.querySelector(selectors);

讓我們深入研究以下示例，以進一步瞭解如何將 addEventListener 應用於選擇元素。

示例

在以下示例中，我們使用 querySelector 結合 addEventListener。

<!DOCTYPE html>
<html>
<body>
   <label>
      Choose:
      <select class="Colours" name="Colour">
         <option value="">Select One …</option>
         <option value="Black">Black</option>
         <option value="Pink">Pink</option>
         <option value="Violet">Violet</option>
      </select>
   </label>
   <div class="tutorial"></div>
   <script>
      const selectElement = document.querySelector('.Colours');
      selectElement.addEventListener('change', (event) => {
         const result = document.querySelector('.tutorial');
         result.textContent = `You like ${event.target.value}`;
      });
   </script>
</body>
</html>

當指令碼執行時，它將生成一個包含一些值的下拉列表。如果使用者從列表中選擇一個選項，則會觸發事件並顯示使用者選擇的選項。

示例

考慮以下示例，其中我們使用 querySelector 和 addEventListener 繪製方塊。

<!DOCTYPE html>
<html>
   <style>
      .box {
         width: 5rem;
         height: 5rem;
         background-color: #3498DB;
         display: inline-block;
      }
      .box.pink {
         background-color: pink;
      }
   </style>
<body>
   <div class="box"></div>
   <div class="box"></div>
   <script>
      document.querySelectorAll(".box").forEach(box =>
      box.addEventListener("click", () => box.classList.toggle("pink")))
   </script>
</body>
</html>

執行上述指令碼後，網頁瀏覽器將在網頁上顯示應用了顏色的方塊。當用戶單擊方塊時，會觸發一個事件並更改這些方塊的顏色。

示例

讓我們考慮另一個示例來執行 querySelector() 和 addEventListener()。

<!DOCTYPE html>
<html>
<body>
   <div class="cricket">MSD</div>
   <div class="cricket">VIRAT</div>
   <div class="cricket">AMLA</div>
   <script>
      const boxes = document.querySelectorAll('.cricket');
      boxes.forEach(box => {
         box.addEventListener('click', function handleClick(event) {
            console.log('cricket clicked', event);
            box.setAttribute('style', 'background-color: lightgreen;');
         });
      });
   </script>
</body>
</html>

當指令碼執行時，它將在網頁瀏覽器上生成包含 div 名稱的輸出。如果使用者單擊名稱，則會觸發事件並將顏色應用於文字。

更新於: 2023年1月18日

8K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告