javascript - 为什么不组合复选框输入更改事件？

Question

我发现 change <input type="checkbox"> 生成的事件有composed设置为 false (至少在 Chrome 80 上是这样)。

Event.composed flag 决定事件是否跨越 shadow DOM 边界传播。 Event.composed 的文档在 Mozilla ( https://developer.mozilla.org/en-US/docs/Web/API/Event/composed ) 上声明:

All UA-dispatched UI events are composed (click/touch/mouseover/copy/paste, etc.).

所以，是 composed = false输入更改事件的预期行为？

这是否记录在规范中(我试图找到它但没有成功)？

如果这是预期的行为，那么 composed = false 的基本原理是什么？对于 change ，但是 composed = true对于，说 click ？

谢谢，亚当

Answer 1

以下内容逐字摘自本文:Shadow DOM v1: Self-Contained Web Components  |  Web Fundamentals

---

The Shadow DOM event model --- When an event bubbles up from shadow DOM it's target is adjusted to maintain the encapsulation that shadow DOM provides. That is, events are re-targeted to look like they've come from the component rather than internal elements within your shadow DOM. Some events do not even propagate out of shadow DOM.

The events that do cross the shadow boundary are:

• Focus Events: blur, focus, focusin, focusout
• Mouse Events: click, dblclick, mousedown, mouseenter, mousemove, etc.
• Wheel Events: wheel
• Input Events: beforeinput, input
• Keyboard Events: keydown, keyup
• Composition Events: compositionstart, compositionupdate, compositionend
• DragEvent: dragstart, drag, dragend, drop, etc.

---

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

至于为什么它不从 Shadow DOM 中冒出来的原因，恐怕我不能提供太多肯定。我只能说，更改事件并不像事件“输入”那样直接指用户操作，而是指 HTMLElement 值的更改。我想只有被认为是用户操作的事件才应该冒出来。

---

编辑以包含更多引用:

以下是围绕规范变更的基本原理的讨论:https://github.com/w3c/webcomponents/issues/513