我有一个简单的Web组件,其中包含<slot>
。它处理表单数据,内部我有UI元素发出数据更改/选定事件。我想知道Web组件如何对插槽内容发出的事件做出反应。这些方面的东西:
<my-form-handler>
<my-player-selector player-id="master"></my-player-selector>
<my-player-selector player-id="challenger"></my-player-selector>
<my-weapons-selector default="sword"></my-weapons-selector>
</my-form-handler>
我知道我可以写<my-form-handler ondataSelected="someFunction">
假设选择器元素发出dataSelected
事件。但这需要代码存在于包含页面而不是my-form-handler中。
我没有使用任何框架(Vue,Angular,React),只是vanilla JS。
您可以在自定义元素<my-form-handler>
中定义constructor()
或connectedCallback()
方法中的处理程序。
customElements.define( 'my-form-handler', class extends HTMLElement {
conectedCallabck() {
this.addEventListener( 'dataSelected', dsHandler )
function dsHandler( ev ) {
console.log( ev.type, ev.target.textContent )
}
}
} )
当然,如果你想让this
引用自定义元素对象,你可以使用箭头函数:
let dsHandler = ev => {
console.log( ev.type, ev.target.textContent )
}
this.addEventListener( 'dataSelected', dsHandler )
您还可以内联定义处理程序:
this.addEventListener( 'dataSelected', ev =>
console.log( ev.type, ev.target.textContent )
)
注意:如果您希望事件处理程序是自定义元素方法,则需要使用bind(this)
以确保它仍然可以访问自定义元素对象。
customElements.define( 'my-form-handler', class extends HTMLElement {
conectedCallabck() {
this.addEventListener( 'dataSelected', this.dsHandler.bind( this ) )
}
dsHandler( ev ) {
console.log( 'recever: %s / emitter: %', this.localName, ev.target.textContent )
}
} )
或者,您可以在handleEvent()
界面的帮助下选择集中式解决方案:
1将自定义元素本身设置为侦听器:
this.addEventListener( 'dataSelected', this )
2实施handleEvent()
方法:
handleEvent( ev ) {
switch( ev.type ) {
case 'dataSelected':
console.log( 'recever: %s / emitter: %', this.localName, ev.target.textContent )
break
}
}
在正在运行的代码段下方:
customElements.define( 'my-form-handler', class extends HTMLElement {
constructor() {
super()
this.addEventListener( 'dataSelected', this )
}
handleEvent( ev ) {
console.log( ev.type, ev.target.textContent )
}
} )
customElements.define( 'my-player-selector', class extends HTMLElement {
constructor() {
super()
this.addEventListener( 'click', () =>
this.dispatchEvent( new CustomEvent( 'dataSelected', { bubbles: true } ) )
)
}
} )
<my-form-handler>
<my-player-selector player-id="master">master</my-player-selector>
<my-player-selector player-id="challenger">challenger</my-player-selector>
<my-weapons-selector default="">sword</my-weapons-selector>
</my-form-handler>