与按钮单击事件的 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 {

  connectedCallback() {

    console.log('x-icicle element initiated')

  }

  listen(el) {

    el.addEventListener('click', function() {

      console.log('Button clicked')

    })

  }

}

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

document.querySelector('x-icicle').listen(document.querySelector('button'))

<button>

  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>