为什么复选框输入更改事件没有被组合？

Question

我发现由生成的change事件在Chrome 80中的composed属性被设置为false。

Event.composed属性决定了事件是否会穿过shadow DOM边界传播。Mozilla上Event.composed的文档(https://developer.mozilla.org/en-US/docs/Web/API/Event/composed)说明：

所有UA分派的UI事件都是组合的（单击/触摸/鼠标悬停/复制/粘贴等）。

那么，composed=false是input change事件的预期行为吗？

这是否记录在规范中(我尝试过没有成功找到)?

如果这是预期行为，那么change的composed=false，但单击事件的composed=true的原理是什么？

谢谢， 亚当

- adamk

Answer 1

以下内容摘自此文章：Shadow DOM v1: Self-Contained Web Components  |  Web Fundamentals

---

Shadow DOM事件模型 --- 当事件从Shadow DOM冒泡时，其目标会调整以维护Shadow DOM提供的封装性。也就是说， 事件将被重新定位，看起来像它们来自组件而不是Shadow DOM内部元素。有些事件甚至不会从Shadow DOM传播出去。

跨越Shadow DOM边界的事件包括：

• 焦点事件：blur、focus、focusin、focusout
• 鼠标事件：click、dblclick、mousedown、mouseenter、mousemove等
• 滚轮事件：wheel
• 输入事件：beforeinput、input
• 键盘事件：keydown、keyup
• 合成事件：compositionstart、compositionupdate、compositionend
• 拖放事件：dragstart、drag、dragend、drop等

---

至于规范，change事件不是InputEvent或UIEvent的实例：https://www.w3.org/TR/uievents/#events-inputevents。它是Event的实例。

至于为什么它不会从Shadow DOM冒泡出去的原因，我恐怕不能确定。我只能说，change事件不直接引用用户操作，像事件“input”那样，而是引用HTMLElement值的更改。我想只有被认为是用户操作的事件才会冒泡出去。

---

编辑以包含更多参考：

这里是有关规范更改的原理讨论：https://github.com/w3c/webcomponents/issues/513

- jackfrankland

---

谢谢。关于spec，你说“change事件不是InputEvent或UIEvent的实例”，但是规范是否曾经说过只有InputEvents和UIEvents会从Shadow Dom中冒泡出来？关于理由，你说“只有被认为是用户操作的事件才应该冒泡出来”，但在HTML Living Standard 4.10.5.5中，change和input事件在用户操作方面具有相同的地位，仅在发生时间上有所不同：修改(input)或提交(change)。我并不想争论，只是想理解... - adamk

没问题，很高兴能讨论这个问题。我对你提到的规范中以下内容的理解是：“每当用户修改控件的数据时，输入事件就会触发。当值被提交时，更改事件就会触发。”正如我所说，输入事件被视为用户操作/界面事件，而更改事件则不是。我还刚刚编辑了答案，其中包括了我引用的规范更改的原因（添加了组合属性以及应该为其设置为true的事件）。 - jackfrankland

我看到这个问题也被提出来了，不知道是巧合还是什么 :) https://github.com/whatwg/html/issues/5453。似乎有些混淆了浏览器应该实现什么。如果它对你的用例有帮助，请不要忘记可以手动重新定位事件。如果附加阴影的模式是关闭的，那么这将更加困难，但并非不可能。 - jackfrankland