Event.composedPath()

 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  

浏览器兼容

 

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Edge No support NoFirefox Full support 52IE No support NoOpera Full support 40
Full support 40
No support 37 — 40
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Safari Full support 10WebView Android Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Chrome Android Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Edge Mobile No support NoFirefox Android Full support 52Opera Android Full support 40
Full support 40
No support 37 — 40
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Safari iOS Full support 10Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Uses a non-standard name.
Uses a non-standard name.

 

文档标签和贡献者

标签: 
此页面的贡献者: DarrenZhang01, icodeajk
最后编辑者: DarrenZhang01,