自定义元素未拾取 onclick

Question

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

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

https://jsfiddle.net/tuxkjp3q/

但是当我点击它时什么也没有发生。

这是为什么？如何将事件处理程序附加到类的每个实例而不覆盖构造函数？

编辑：

当我检查 DOM 对象时，有一个 onclick 处理程序，但它不起作用。这很令人困惑

编辑2：

进一步的发现，当从原型中省略时，定义处理程序是有效的

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

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

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

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

如果我们能得到对这种现象的解释，我会非常高兴。

编辑3：

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

// 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

问题是你需要定义 click 的监听器...而不是 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>