在自定义元素中使用类方法作为 onclick 函数答案

【问题标题】：using class method as onclick function in custom element在自定义元素中使用类方法作为 onclick 函数
【发布时间】：2021-08-19 00:24:42
【问题描述】：

我正在尝试将 on/off-switch 编码为 JavaScript 中的自定义元素。但我坚持将 onclick 方法从元素设置为定义的类方法：

class ToggleSwitch extends HTMLElement {

pp(f) {
    alert(f);
}

constructor() {
    super();

    this.checked = this.hasAttribute("checked");

    var shadow = this.attachShadow({ mode: "open" });

    var span = document.createElement("span");
    var input = document.createElement("input");
    var style = document.createElement("style");
    var label = document.createElement("label");

    span.setAttribute("class", "toggle-span");
    input.setAttribute("class", "toggle-input");
    input.onclick = this.pp("hello");
    label.setAttribute("class", "toggle-label");

    shadow.appendChild(style);
    shadow.appendChild(label);
    label.appendChild(input);
    label.appendChild(span);
}
}

customElements.define("toggle-switch", ToggleSwitch);

当然可以像elem.onclick = () => {...} 那样做，但是当涉及到大型函数时，那会很痛苦。当我选择元素并在控制台中键入 $0.onclick 时，它只返回 null。

【问题讨论】：

标签： javascript function class ecmascript-6

【解决方案1】：

嗯，比预期的要容易：

input.addEventListener("click", () => this.pp("hello"));

【讨论】：

你为什么选择这个而不是input.onclick = () => {...}？
因为当涉及到更大的点击功能时，这会很糟糕。
究竟哪一部分会令人敬畏？将大函数分配给属性和将大函数传递给另一个函数对我来说似乎没有太大区别。