自定义元素未拾取 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>

Answer 2

您真正所做的就是为您的自定义元素创建一个onclick属性并为其分配一个函数。 仅仅因为它被命名为onclick并不意味着系统知道它是一个click事件，因为您正在制作自己的元素。 您将需要为您的自定义元素创建一个自定义事件。

Answer 3

您在附加所有以on开头的处理程序时非常直率

猜猜可能有多少：

 document.body.append( ...Object.getOwnPropertyNames(window).filter(prop => prop.indexOf("on") === 0) .map((prop, idx, arr) => { let div = document.createElement("div"); div.innerHTML = `${arr.length-idx}   ${prop}`; return div; }));

您不必使用addEventListener ；

在组件中使用（旧） this.onclick=处理程序可以更灵活，
因为组件的用户可以很容易地覆盖它。
使用addEventListener组件的作者必须提供一个removeListener方法； 否则用户无法删除侦听器。

有关不同 JavaScript 事件模型的信息：

• https://www.quirksmode.org/js/events_tradmod.html