Javascript 如何将keyup事件附加到自定义元素shadowRoot

我已经寻找了一段时间；但只能找到答案
或者回答将EventListener放在shadowRoot中的DOM元素上的问题

我试图通过本机自定义元素实现的效果：

• 只有聚焦元素才能接受（并显示）按键

可以将click事件附加到shadowRoot，似乎我对“keyup”事件做了一些错误的事情

如果我将

EventListener

放在

窗口上

所有元素（当然）都会用相同的键信息更新

window.customElements.define（'game-toes'，类扩展了HtmleElement{
构造函数（）{
超级（）；
让shadowRoot=this.attachShadow（{mode:'open'}）；
shadowRoot.innerHTML=this.tabIndex；
shadowRoot.addEventListener（'keyup'，evt=>this.shadowRoot.innerHTML='key:'+evt.key）；
}
});
游戏脚趾{
显示：内联块；
高度：自动；
宽度：100px；
填充：1em；
边框：10px纯绿；
}
游戏脚趾：焦点{
背景颜色：浅绿色；
}
在您的示例中，
tabindex
属性设置为自定义元素
，而不是其阴影DOM

因此，您应该监听自定义元素本身上的
keyup
事件：

this.addEventListener('keyup',evt=>this.shadowRoot.innerHTML = 'key:'+evt.key);


window.customElements.define（'game-toes'，类扩展了HtmleElement{
构造函数（）{
超级（）；
让shadowRoot=this.attachShadow（{mode:'open'}）；
shadowRoot.innerHTML=this.tabIndex；
this.addEventListener（'keyup'，evt=>this.shadowRoot.innerHTML='key:'+evt.key）；
}
});
游戏脚趾{
显示：内联块；
高度：自动；
宽度：100px；
填充：1em；
边框：10px纯绿；
}
游戏脚趾：焦点{
背景颜色：浅绿色；
}
在您的示例中，
tabindex
属性设置为自定义元素
，而不是其阴影DOM

因此，您应该监听自定义元素本身上的
keyup
事件：

this.addEventListener('keyup',evt=>this.shadowRoot.innerHTML = 'key:'+evt.key);


window.customElements.define（'game-toes'，类扩展了HtmleElement{
构造函数（）{
超级（）；
让shadowRoot=this.attachShadow（{mode:'open'}）；
shadowRoot.innerHTML=this.tabIndex；
this.addEventListener（'keyup'，evt=>this.shadowRoot.innerHTML='key:'+evt.key）；
}
});
游戏脚趾{
显示：内联块；
高度：自动；
宽度：100px；
填充：1em；
边框：10px纯绿；
}
游戏脚趾：焦点{
背景颜色：浅绿色；
}
您可以像以前那样做，但需要添加一些额外的代码以使其正常工作：


功能开启（el、evt、cb）{
el.addEventListener（evt，cb）；
return（）=>{
el.移除事件监听器（evt，cb）；
}
}
window.customElements.define（'game-toes'，类扩展HtmleElement{
构造函数（）{
超级（）；
让shadowRoot=this.attachShadow（{mode:'open'}）；
shadowRoot.innerHTML=this.tabIndex；
}
connectedCallback（）{
这个。_offKeyup=on（这个'keyup'，evt=>{
this.shadowRoot.innerHTML=evt.key；
evt.stopPropagation（）；//防止事件离开此元素
});
}
disconnectedCallback（）{
这个；
}
});
游戏脚趾{
显示：内联块；
高度：自动；
宽度：100px；
填充：1em；
边框：10px纯绿；
}
游戏脚趾：焦点{
背景颜色：浅绿色；
}
您可以像以前那样做，但需要添加一些额外的代码以使其正常工作：


功能开启（el、evt、cb）{
el.addEventListener（evt，cb）；
return（）=>{
el.移除事件监听器（evt，cb）；
}
}
window.customElements.define（'game-toes'，类扩展HtmleElement{
构造函数（）{
超级（）；
让shadowRoot=this.attachShadow（{mode:'open'}）；
shadowRoot.innerHTML=this.tabIndex；
}
connectedCallback（）{
这个。_offKeyup=on（这个'keyup'，evt=>{
this.shadowRoot.innerHTML=evt.key；
evt.stopPropagation（）；//防止事件离开此元素
});
}
disconnectedCallback（）{
这个；
}
});
游戏脚趾{
显示：内联块；
高度：自动；
宽度：100px；
填充：1em；
边框：10px纯绿；
}
游戏脚趾：焦点{
背景颜色：浅绿色；
}

我想你不能在不可聚焦的元素上注册keyup事件，除非你用
之类的东西破解它。我想你不能在不可聚焦的元素上注册keyup事件，除非你用
之类的东西破解它