为何HTML字符串添加到DOM前无法绑定onClick？求可行解决方案

问题代码 #

function myfunc(){
   const checkbocClick = () => {
     console.log("chceckbox click")
   }

   createElement = () => {
     let isChecked = (Number(addressPoiData.notSendInfoToDriver) === Number(0))? 'checked': ""
     return `<input type="checkbox" class="form-check-input" id="sent-to-driver" onClick='checkbocClick()' ${isChecked}>`
    }
    return createElement()
}

报错信息 #

Uncaught ReferenceError: checkboxClick is not defined at HTMLInputElement.onclick

问题根源 #

字符串模板生成的内联onClick代码会在全局作用域查找checkbocClick函数，但该函数是myfunc内部的局部函数，全局作用域无法访问，因此报错。

解决方案 #

方案1：使用事件委托（推荐，避免直接操作DOM元素） #

不在模板中写内联事件，给checkbox标记唯一类名，通过全局事件委托监听点击：

function myfunc(){
  const checkboxClick = () => {
    console.log("checkbox click")
  }

  const createElement = () => {
    let isChecked = (Number(addressPoiData.notSendInfoToDriver) === 0)? 'checked': ""
    // 新增唯一类名用于事件判断
    return `<input type="checkbox" class="form-check-input checkbox-send-to-driver" id="sent-to-driver" ${isChecked}>`
  }

  // 全局监听点击，判断目标是否为目标checkbox
  document.addEventListener('click', (e) => {
    if (e.target.matches('.checkbox-send-to-driver')) {
      checkboxClick()
    }
  })

  return createElement()
}

方案2：用DOM API创建元素（更直观，避免字符串拼接问题） #

放弃字符串模板，直接用原生DOM方法创建元素并绑定事件：

function myfunc(){
  const checkboxClick = () => {
    console.log("checkbox click")
  }

  const createElement = () => {
    const checkbox = document.createElement('input')
    checkbox.type = 'checkbox'
    checkbox.className = 'form-check-input'
    checkbox.id = 'sent-to-driver'
    checkbox.checked = Number(addressPoiData.notSendInfoToDriver) === 0
    // 直接绑定局部函数
    checkbox.addEventListener('click', checkboxClick)
    return checkbox
  }

  return createElement()
}

为什么之前的尝试无效 #

• 改成普通函数：依然是myfunc的局部函数，全局作用域无法访问，报错不变。
• 使用${checkbocClick}：函数会被转为字符串[object Function]，内联onClick执行的是[object Function]()，语法错误导致无响应。

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