为什么在 JavaScript 中，addEventListener 到"select"元素不起作用?
当用户更改元素的值时，<input>、<select> 和 <textarea> 元素会触发 change 事件。与 input 事件不同，change 事件并不总是在元素值的每次更改时触发。
相反，使用 querySelector() 和 addEventListener()。让我们逐一讨论以了解它们的工作原理。
addEventListener() 方法 - addEventListener() 是一种用于在当前元素上为指定事件类型注册事件处理程序的方法。它允许您指定一个函数，每当元素上发生指定事件时，该函数都会被调用。以下是 addEventListener() 的语法
target.addEventListener(event, function, useCapture)
querySelector() 方法 − 一个元素接口函数，允许我们搜索文档并返回第一个元素。当元素与提供的 CSS 选择器或选择器组之一匹配时，即找到该元素。
但是，如果未发现匹配元素，则返回 null。Document 接口是唯一使用 querySelector () 方法的接口。以下是 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 名称组成的输出。如果用户点击名称，则会触发事件并将颜色应用于文本。
