与按钮单击事件的 Web 组件交互

Question

我有一个x-icicle我可以完全控制的自定义 HTML 元素，我想让它与 HTML 按钮（可以在 DOM 中的任何位置）交互，例如，每次按下按钮时我都希望执行一些 JS在x-icicle。

<button></button>

<x-icicle></x-icicle>

class Icicle extends HTMLElement {

  // ...

  if (buttom_pressed) {

    // something

  }

}

customElements.define('x-icicle', Icicle);

我不知道如何将按钮事件发送到x-icicle。也许以某种方式设置回调？

有什么提示吗？

Answer 1

您可以向自定义元素类添加一个方法class Icicle extends HTMLElement {&nbsp; connectedCallback() {&nbsp; &nbsp; console.log('x-icicle element initiated')&nbsp; }&nbsp; listen(el) {&nbsp; &nbsp; el.addEventListener('click', function() {&nbsp; &nbsp; &nbsp; console.log('Button clicked')&nbsp; &nbsp; })&nbsp; }}customElements.define('x-icicle', Icicle)document.querySelector('x-icicle').listen(document.querySelector('button'))<button>&nbsp; Button</button><x-icicle></x-icicle>

Answer 2

一个解决方案是使用CustomEvent看看下面的例子（我用了一个简单的span而不是你的自定义元素，但它会完全一样）const button = document.getElementById('button');const span = document.getElementById('span');button.addEventListener('click', evt => {    span.dispatchEvent(new CustomEvent('myEvent'));});span.addEventListener('myEvent', evt => {    span.innerHTML = 'button has been clicked';});<button id="button">button</button><span id="span"></span>