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