如何将keyup事件附加到Custom Element shadowRoot [英] How to attach a keyup event to Custom Element shadowRoot

问题描述

我搜索了一段时间；但只能找到Polymer答案；

或将EventListeners放在DOM元素内 shadowRoot的答案。

I have searched for some time; but only find Polymer answers;
or answers where EventListeners are put on DOM elements inside the shadowRoot.

效果我正在尝试使用本机自定义元素实现：

The effect I am trying to achieve with native Custom Elements:

• 只有关注的元素应该接受（并显示）按键 >

• Only the focussed element should accept (and display) a keypress

可以将click事件附加到shadowRoot，看来我在为'keyup'事件做错了。

It is possible to attach a click event to the shadowRoot, it seems I am doing something wrong for the 'keyup' event.

如果我将 EventListener 放在窗口全部上元素（当然）会使用相同的键信息进行更新。

If I put the EventListener on the window all elements (of course) update with the same key info.

window.customElements.define('game-toes', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot=this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = this.tabIndex;
    shadowRoot.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>

推荐答案

您可以像以前一样进行操作，但是需要添加一些额外的代码才能使其正常工作：

You can do it like you were but you need to add some extra code to make it work:

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


window.customElements.define('game-toes', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot=this.attachShadow({mode: 'open'});
    shadowRoot.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 中释放它们，除非您从未计划删除您的组件。

1) You may want to use evt.stopPropagation() to stop the event from leaving the component. 2) You either need to add your eventListener on the component itself OR, create an element in the shadowRoot with the ability to take focus and then set focus on the inner element when the component gets focus. And then you should be able to add the keyup event on that internal element. 3) It is safest to add the eventListener in connectedCallback and release them in the disconnectedCallback unless you never plan to remove your component.

这篇关于如何将keyup事件附加到Custom Element shadowRoot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！