如何在innerHTML中使用onClick函数

Posted 2023-05-07

【中文标题】如何在innerHTML中使用onClick函数

【英文标题】：How to use onClick function inside innerHTML

【发布时间】：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);

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