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

Question

我已经搜索了一段时间;但只找到 Polymer 答案;
或者 EventListeners 放在 shadowRoot内部DOM 元素上的答案。

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

• 只有获得焦点的元素才应接受(并显示(按键

可以将单击事件附加到shadowRoot，似乎我对"keyup"事件做错了什么。

如果我把EventListener放在window所有元素(当然(都会使用相同的关键信息更新。

window.customElements.define('game-toes', class extends HTMLElement {
constructor() {
super().attachShadow({mode:'open'})
.innerHTML = this.tabIndex;
this.addEventListener('keyup',evt=>this.shadowRoot.innerHTML = 'key:'+evt.key);        
}
});

game-toes{
display:inline-block;
height:auto;
width:100px;
padding:1em;
border:10px solid green;
}
game-toes:focus { 
background-color: lightgreen;
}

<game-toes tabindex=1></game-toes>
<game-toes tabindex=2></game-toes>
<game-toes tabindex=3></game-toes>

Answer 1

你可以像以前一样做，但你需要添加一些额外的代码来使其工作：

function on(el, evt, cb) {
el.addEventListener(evt, cb);
return () => {
el.removeEventListener(evt, cb);
}
}

window.customElements.define('game-toes', class extends HTMLElement {
constructor() {
super()
.attachShadow({mode: 'open'})
.innerHTML = this.tabIndex;
}

connectedCallback() {
this._offKeyup = on(this, 'keyup', evt => {
this.shadowRoot.innerHTML = evt.key;
evt.stopPropagation(); // Prevent the event from leaving this element
});
}

disconnectedCallback() {
this._offKeyup();
}
});

game-toes{
display:inline-block;
height:auto;
width:100px;
padding:1em;
border:10px solid green;
}
game-toes:focus { 
background-color: lightgreen;
}

<game-toes tabindex=1></game-toes>
<game-toes tabindex=2></game-toes>
<game-toes tabindex=3></game-toes>

1. 您可能希望使用evt.stopPropagation()来阻止事件离开组件。
2. 您需要在组件本身上添加 eventListener，或者在 shadowRoot 中创建一个能够获取焦点的元素，然后在组件获得焦点时将焦点设置在内部元素上。然后，您应该能够在该内部元素上添加keyup事件。
3. 最安全的方法是在connectedCallback中添加 eventListener 并在disconnectedCallback中释放它们，除非您从未打算删除组件。

Answer 2

在您的示例中，tabindex属性设置为自定义元素<game-toes>，而不是其 Shadow DOM。

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

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

window.customElements.define('game-toes', class extends HTMLElement {
constructor() {
super();
let shadowRoot=this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = this.tabIndex;
this.addEventListener('keyup',evt=>this.shadowRoot.innerHTML = 'key:'+evt.key);        
}
});

game-toes{
display:inline-block;
height:auto;
width:100px;
padding:1em;
border:10px solid green;
}
game-toes:focus { 
background-color: lightgreen;
}

<game-toes tabindex=1></game-toes>
<game-toes tabindex=2></game-toes>
<game-toes tabindex=3></game-toes>

或者，如果要在 Shadow DOM 级别侦听keyup事件，则应在 Shadow DOM 内的元素中设置tabindex属性。