如何在子元素的影子dom中听到被触发的事件？

Question

我有两个web组件，一个是列表项，另一个是容器。在列表项中有一个按钮，用于调度事件onclick。两个组件都使用分离的阴影。

<custom-list>
        <custom-list-item></custom-list-item>
        <custom-list-item></custom-list-item>
        <custom-list-item></custom-list-item>
</custom-list>

如何在'custom-list-item'中按钮的“自定义列表”中收听？

Answer 1

在容器自定义元素<custom-list>中，只需监听Shadow DOM根目录上的click元素。由内部Shadow DOM中的元素发出的click事件将自然地冒泡到其容器中。

this.shadowRoot.addEventListener( 'click', ev => console.log( ev.target.id ) )

您还可以实现handleEvent()方法来处理自定义元素中管理的所有事件：

customElements.define( 'custom-list-item', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `<button>Click</button>`             
    }  
} )

customElements.define( 'custom-list', class extends HTMLElement {
    constructor() {
        super() 
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `
                <custom-list-item id=1></custom-list-item>
                <custom-list-item id=2></custom-list-item>
                <custom-list-item id=3></custom-list-item>` 
        this.shadowRoot.addEventListener( 'click', this )
    }
    handleEvent( ev ) {
        console.log( ev.target.id )
    }
} )

<custom-list></custom-list>

Answer 2

你可以在<custom-list onclick="doSomething()">组件上放一个onclick事件并检查函数内部的event.target === custom-list-item

doSomething(event) {
  event.target === custom-list-item
  // do what you want to do
}