HTML <select>元素是否应当触发beforeinput事件？

你对规范的理解没有偏差，出现文档、规范描述和实际测试结果不一致的情况，本质是主流浏览器的实现滞后，和你的代码写法、规范解读无关。

具体说明 #

• 规范和文档层面：W3C UI事件规范明确将HTMLSelectElement纳入beforeinput事件的可信触发目标范围，和<input>、<textarea>、开启contenteditable属性的元素一致，MDN文档标注<select>支持该事件，也是基于规范文本给出的说明。
• 实际落地现状：截至目前，Chrome、Safari、Firefox三大主流浏览器的全量稳定版本，均未实现<select>元素触发beforeinput事件的逻辑，切换下拉选项时只会按预期触发input、change事件，你测试观察到的表现是通用情况，不是个别环境的问题。
• 当前beforeinput事件的实际稳定支持范围，仅覆盖文本输入类场景：包括文本类<input>控件（非下拉选择类type，如text、number、password等）、<textarea>、可编辑内容区域，所有下拉选择类控件都没有适配该事件。

复现代码 #

const sel = document.getElementById('pet-select')
sel.addEventListener('beforeinput', () => console.log('beforeinput!'))
sel.addEventListener('input', () => console.log('input!'))

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

临时替代方案 #

如果需要实现<select>值修改前的拦截逻辑，目前没有原生前置事件可用，可以提前缓存控件的上一次选中值，在input事件触发时做校验，若新值不符合预期则手动回滚到缓存的旧值，模拟前置拦截的效果。

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