Question

我有两个Web组件，一个是列表项，另一个是容器。在列表项中，有一个按钮，该按钮调度onclick事件。这两个组件都使用单独的影子球。

offset

如何在“自定义列表”中监听“自定义列表项”中的按钮发出的事件？

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
}

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

2 个答案: