如何在 innerHTML 中使用 onClick 函数

Question

这是我的 JS 文件，它是可重复使用的 HTML 组件之一，因为我没有使用任何框架。在此之前我使用的是ReactJS，因为某些原因，我要求不使用任何前端框架。

我的问题是我想为按钮创建 onClick 函数。我认为这与在 ReactJS 中使用 JSX 是一样的，但它不起作用。我想在 innerHTML 中添加 <script> 标签，但我认为它不相关，因为这已经是一个 javascript 文件。

class Header extends HTMLElement {
    connectedCallback() {
        this.innerHTML =
           `
             <button onclick="">Try it</button>
           `
    }
}

customElements.define('main-header', Header);

Answer 1

<button onclick="fn()">Try it</button>
或者直接在引号中写代码：
onclick="console.log('click')"

Answer 2

HolaPz 是正确的，但为了更清楚地展示-

function buttonClicked()
{
  console.log("You son of a gun, you did it");
}

class Header extends HTMLElement {
    connectedCallback() {
        this.innerHTML =
           `
             <button onclick="buttonClicked()">Try it</button>
           `
    }
}

customElements.define('main-header', Header);

注意：调用 buttonClicked 时，“this”上下文将设置为 Window 对象，并且只有顶级函数可用。根据您希望如何进行编码，在连接的回调中使用 this.querySelector 来获取对按钮的引用，然后手动向其添加绑定函数或事件侦听器（通过 addEventListener）可能是有意义的。

如何在 innerHTML 中使用 onClick 函数

How to use onClick function inside innerHTML

html

javascript

onclick

innerhtml