为何select元素切换选项时不触发keyup/keydown？是否有其他事件？

为什么keyup/keydown事件没被触发？ #

这是因为当你打开select的下拉选项列表后，这个列表是浏览器原生的系统级控件，并非页面DOM树的一部分。浏览器会接管这个下拉列表的所有交互事件（包括键盘操作），所以此时按下上下箭头的键盘事件不会冒泡到你的select元素上，自然无法被你添加的事件监听器捕获到。

不过要注意：在下拉列表未打开时，直接聚焦select并按上下箭头切换选项，此时是可以触发keyup/keydown事件的——因为这种情况下是select元素本身在处理键盘输入，而非原生下拉控件。

切换选项时有没有其他可监听的事件？ #

有的，根据你的需求场景，可以选择以下几种事件：

• change事件：当用户确认选中了某个新选项（无论是鼠标点击还是按回车确认）时触发。但它不会在你用上下箭头切换候选选项的过程中触发，只有最终选中项改变时才会响应。
• input事件：和change类似，但触发时机更早——只要选中项发生变化（包括键盘切换选项时的每一次选中变化）就会触发，不过同样是在选项被选中后，而非切换过程中的“悬停”状态。
• 如果你需要监听下拉列表打开/关闭的状态，可以结合focus和blur事件，再配合click事件来判断下拉列表的展开状态，不过这种方式兼容性可能略有差异。

如果你需要完全控制键盘交互怎么办？ #

如果你的业务场景必须监听下拉列表切换过程中的每一次键盘操作，那最稳妥的方案是自定义实现下拉组件：用div、ul/li等HTML元素模拟select的外观和交互，这样所有键盘事件都能被你的JS代码完全捕获和处理，不受浏览器原生控件的限制。

示例代码参考 #

比如给select添加input和change事件监听：

<!-- 给select添加id方便获取元素 -->
<select name="text" id="mySelect">
  <option value="opt1">选项1</option>
  <option value="opt2" selected>选项2</option>
  <option value="opt3">选项3</option>
</select>

<script>
const selectEl = document.getElementById('mySelect');

// 监听选中项变化
selectEl.addEventListener('input', (e) => {
  console.log('当前选中项（input事件）：', e.target.value);
});

selectEl.addEventListener('change', (e) => {
  console.log('最终选中项（change事件）：', e.target.value);
});

// 下拉未打开时的键盘事件监听
selectEl.addEventListener('keydown', (e) => {
  console.log('键盘按键（下拉未打开）：', e.key);
});
</script>

内容的提问来源于stack exchange，提问作者themihai