如何在原生自定义HTML组件的innerHTML中使用onClick函数

失效原因 #

原生DOM的内联onclick属性和React JSX中onClick的工作逻辑完全不同：

• React的onClick是合成事件，会自动绑定到当前组件实例的方法作用域
• 原生HTML的onclick内联属性只会在全局window作用域下查找对应函数，无法直接访问自定义元素类内部的方法，所以直接写内联事件不会生效

推荐实现方案 #

DOM渲染完成后手动绑定事件，同时搭配卸载逻辑避免内存泄漏：

class Header extends HTMLElement {
    connectedCallback() {
        // 先渲染DOM结构
        this.innerHTML = `
          <button>Try it</button>
        `
        // 获取按钮元素绑定点击事件
        this.targetBtn = this.querySelector('button')
        this.targetBtn.addEventListener('click', this.handleBtnClick)
    }

    // 点击处理方法，用箭头函数保证this指向当前组件实例
    handleBtnClick = () => {
        // 此处写你的业务逻辑
        console.log('按钮触发点击')
    }

    // 组件从DOM上卸载时移除事件监听，避免内存泄漏
    disconnectedCallback() {
        this.targetBtn.removeEventListener('click', this.handleBtnClick)
    }
}

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

不推荐可选方案 #

如果一定要使用内联onclick写法，需要把处理函数挂载到全局window对象上，该方案会污染全局作用域，多个组件实例会互相冲突，不建议使用：

// 全局挂载处理函数
window.headerBtnClick = () => {
  console.log('按钮触发点击')
}

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

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

内容的提问来源于stack exchange，提问作者Daeng