Event.composedPath() - Web API 接口参考 编辑
composedPath() 是 Event 接口的一个方法，当对象数组调用该侦听器时返回事件路径。 如果影子根节点被创建并且ShadowRoot.mode是关闭的，那么该路径不包括影子树中的节点。
语法
var composed = Event.composedPath();
参数
无.
返回值
一个 EventTarget对象数组，表示将在其上调用事件侦听器的对象。
例子
在我们的 composed-composed-path 例子中，我们定义了两个自定义元素，<open-shadow> 和 <closed-shadow>，两 个全都调用了它们文本属性的内容然后作为<p> 元素的文本内容将它们插入到元素的影子DOM中。两者之间唯一的区别是它们影子的根结点是在它们的模式被分别设置成open 和 closed 的情况下连接的。
第一个定义就像这样, 比如:
customElements.define('open-shadow',
class extends HTMLElement {
constructor() {
super();
let pElem = document.createElement('p');
pElem.textContent = this.getAttribute('text');
let shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(pElem);
}
});然后我们在我们的页面中插入其中一个元素:
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>然后在 <html> 元素中插入一个鼠标点击事件:
document.querySelector('html').addEventListener('click',function(e) {
console.log(e.composed);
console.log(e.composedPath());
});当你先后点击 <open-shadow> 和 <closed-shadow> 这两个元素, 你将会注意到两件事情. 第一， composed 这个属性返回值为 true 因为 click 事件总能够在影子边界中传播。 第二，你将注意到两个元素中composedPath 的值的不同。 <open-shadow> 元素的组成路径是这个:
Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]尽管 <closed-shadow> 元素的组成路径是像下面这样:
Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]在第二个例子中，事件监听器仅能够传播到 <closed-shadow> 元素本身，但是不会到影子边界内的节点。
规范
| 规格 | 状态 | 评语 |
|---|---|---|
| DOM composedPath() | Living Standard |
浏览器兼容
BCD tables only load in the browser
这个页面的兼容表是从结构化的数据中制作出来的。如果你想为数据做贡献，请点击 https://github.com/mdn/browser-compat-data 然后发送一个 pull 请求.如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论