HTML的<select>元素是否应该触发`beforeinput`事件？

Question

MDN页面上写道:

当一个<input>, <select>, 或者 <textarea>标签的值即将被修改时，DOM会触发beforeinput事件。

可以明确地看到，<select>标签支持beforeinput事件。

从我对规范文档的简单阅读来看，这也是正确的:

可信赖的目标: 元素（特别是控件类型如HTMLInputElement等）或启用contenteditable属性的任何元素

(我加的重点)

然而，似乎没有浏览器实现它。 我已经检查了Chrome、Safari和Firefox。

是否有什么地方我理解错了吗？

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>

- yossizahn

---

HTMLInputElement 指的是 <input> 元素，不是 <select>。 - phuzi

@phuzi，这不是MDN所说的。它明确提到了<select>。 - trincot

@phuzi，你似乎是正确的。我没有意识到<select>实际上并不继承自HTMLInputElement接口。也许MDN文档是错误的。 - yossizahn

规范的语言有些含糊不清。“控件类型 例如 HTMLInputElement _等等_”。 - yossizahn

当然可以，但是在那个规范中，“input”事件也使用了同样的短语。我会点赞这个问题——它让我也感到好奇。 - trincot

这个问题已经在这里得到解决，并且已于6月21日更改。MDN页面不再提及<select>。 - Queuebee

Answer 1

MDN页面复制了input事件页面的摘要，该事件确实在此元素上触发。我已经在那里打开了一个PR来纠正这个问题。 beforeinput事件不应该在<select>上触发，就像它不会在非文本输入上触发一样：

addEventListener('input', () => console.log('input!'))
addEventListener('beforeinput', () => console.log('beforeinput!'))

<input type=text placeholder="here it fires"><br>
<input type=checkbox><br>
<input type=radio><br>
<input type=file><br>
<input type=color>

为了理解这一点，我们需要回到历史上看看HTML规范如何首次设计input事件。
只有经过一段时间后，它才被转移到W3C/UI-Events工作组。
另一方面，beforeinput则是由W3C/Editing小组起草，然后转移到W3C/UI-Events。
W3C/UI-Events组的讨论清楚地表明，他们的意图是仅在用户键盘输入产生更改时触发它。他们甚至最初预计不会对粘贴或剪切等操作触发它。

---

好的，但为什么和其他非文本输入元素会触发input事件？ 这是因为HTML规范（现在由WHATWG处理）实际上仍然定义了input事件并要求其发生： 对于元素他们说：

当用户代理发送选择更新通知时，请在用户交互任务源上排队一个元素任务，以运行以下步骤：

1. 在元素上触发名为input的事件，并将bubbles和composed属性初始化为true。 至于文本 他们说：
   当输入和更改事件应用时（对于除按钮和隐藏状态中具有类型属性的所有输入控件都是如此），触发事件以指示用户已与控件交互。每当用户修改控件的数据时，输入事件都会触发。
   
   至于复选框、单选框和文件输入 checkboxes:、radio 和 file，您会发现以下内容：
   
   输入激活行为如下：
   
   1. 如果元素未连接，则返回。 2. 在元素上触发名为“input”的事件，并将其 bubbles 和 composed 属性初始化为 true。 3. 在元素上触发名为“change”的事件，并将其 bubbles 属性初始化为 true。

   ---

   HTML规范中对于beforeinput事件的唯一提及是在仅仅11天前添加的，但该PR只是将该事件公开，而没有改变其定义。

- Kaiido