javascript - 自定义元素未拾取 onclick

Question

我正在定义一个自定义元素

customElements.define("my-button", class extends HTMLButtonElement {
  onclick() {
    console.log("bar");
  }
}, { extends: "button" })

https://jsfiddle.net/tuxkjp3q/
但是当我点击它时，什么也没有发生。
为什么会这样？如何在不覆盖构造函数的情况下将事件处理程序附加到类的每个实例？
编辑:
当我检查 DOM 对象时，有一个 onclick 处理程序，但它不起作用。这令人困惑

编辑2:
进一步的发现，当从原型(prototype)中省略时，定义一个处理程序是可行的

customElements.define("my-button", class extends HTMLButtonElement {
  constructor() {
    super();
    this.onclick = () => console.log("bar");
  }
}, { extends: "button" })

但是当原型(prototype)包含 onclick ，相同的处理程序不再起作用

customElements.define("my-button", class extends HTMLButtonElement {
  onclick() {
    console.log("bar");
  }

  constructor() {
    super();
    this.onclick = () => console.log("bar");
  }
}, { extends: "button" })

如果我们能得到这个现象的解释，我会非常高兴。
编辑 3:
如果有人遇到同样的问题，我想出了一个解决方法。可能值得注意的是，只有在实例化类的直接原型(prototype)中定义的处理程序才会被附加，这对性能有好处，但可能存在逻辑缺陷。无论如何，它可以根据您的要求进行调整。

// Only in the base class
constructor() {
  super();

  for (let prop of Object.getOwnPropertyNames(this.constructor.prototype)) {
    if (prop.indexOf("on") === 0) {
      this.addEventListener(prop.substring(2).toLowerCase(), this.constructor.prototype[prop]);
    }
  }
}

我仍然非常有兴趣了解其中的原因。

Answer 1

问题是您需要定义单击的监听器...而不是 onClick 函数

class CustomButton extends HTMLButtonElement  {
  constructor() {
    super();

    this.addEventListener('click', () => {
      console.log('clicked');
    });
  }
}

customElements.define('custom-button', CustomButton, { extends: "button" });

html

<button is="custom-button">
  Hi
</button>