为什么在 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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告