Javascript Stencil.js-事件侦听器的说明

考虑以下简单的

输入组件：

从'@stencil/core'导入{Component，VNode，h，Prop，Host}
@组成部分({
标记：“我的输入”，
})
导出类MyInput{
@Prop（）inputId！：字符串
@Prop（）标签！：字符串
@Prop（）值：字符串
render（）：VNode{
返回(
{this.label}
)
}
}

呈现带有两个事件侦听器的
组件的父组件：

从'@stencil/core'导入{Component，h，VNode}
@组成部分({
标签：“我的页面”，
})
导出类MyPage{
私有handleInput=（ev:事件）=>{
//这很有效
console.log（'handle input'）
}
私人handleFocus=（ev:事件）=>{
//这不管用
log（'handle focus'）
}
私有handleClick=（ev:Event）=>{
//这很有效
console.log（'handle click'）
}
私人车把LUR=（电动汽车：事件）=>{
//这不管用
log（'handle blur'）
}
render（）：VNode{
返回(
)
}
}

请有人向我解释一下，为什么有些侦听器实际工作，而其他的不工作？
焦点和模糊事件处理程序不启动的原因是，您将侦听器附加到
my input
元素，而不是实际的
input
元素。这意味着只有泡泡触发的事件的监听器（单击，输入），其余的（聚焦，模糊）不会

启用这些非冒泡事件的一种方法是代理它们：

export class MyInput {
  @Event() myFocus: EventEmitter<FocusEvent>;

  render() {
    return (
      <Host>
        <label htmlFor={this.inputId}>{this.label}</label>
        <input type="text" id={this.inputId} value={this.value} onFocus={e => this.myFocus.emit(e)} />
      </Host>
    )
  }
}

导出类MyInput{
@Event（）myFocus:EventEmitter；
render（）{
返回(
{this.label}
this.myFocus.emit（e）}/>
)
}
}

在这里，我将一个
focus
事件处理程序附加到
input
并触发自定义
myFocus
事件，您可以从组件外部侦听该事件。您可能还希望通过将decorator更改为
@Listen（{bubbles:false}）myFocus来阻止这些事件冒泡

这也是Ionic框架（由与Stencil相同的人制作）的工作原理，参见