如何在innerHTML中使用onClick函数答案

【问题标题】：How to use onClick function inside innerHTML如何在innerHTML中使用onClick函数
【发布时间】：2021-12-14 05:21:13
【问题描述】：

这是我的 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);

【问题讨论】：

标签： javascript html onclick innerhtml

【解决方案1】：

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

【讨论】：

【解决方案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）可能是有意义的。

【讨论】：