我有两个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元素中<custom-list>，只需侦听clickShadow DOM根目录上的元素。click内部Shadow DOM中的元素发出的事件自然会冒泡到其容器。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句