JavaScript中如何在模板字符串内调用onclick点击事件

问题原因 #

你在模板字符串的onclick属性中直接写入${this.removeBook(bookItem)}，这会在模板字符串拼接生成HTML的阶段立即执行removeBook方法，而非将其作为点击事件的回调函数绑定给按钮。你生成了3行表格，因此页面加载时会自动执行3次removeBook打印Hello。
另外你给所有删除按钮设置了相同的id="btnRemove"，属于无效的HTML语法，同一个页面内id属性不能重复，直接保留class属性即可。

解决方案1：使用事件委托（推荐） #

不需要给每个按钮单独绑定事件，直接给表格父容器绑定点击事件，通过事件冒泡判断点击目标是否为删除按钮即可，性能更好，也适配动态新增的表格行：

class DisplayBook {
  constructor() {
    // 初始化时给表格父容器绑定事件委托
    tableBody.addEventListener('click', (e) => {
      // 判断点击的是删除按钮
      if (e.target.classList.contains('btn-remove')) {
        // 拿到当前点击按钮所在的tr行，移除
        const targetTr = e.target.closest('tr')
        this.removeBook(targetTr)
      }
    })
  }

  // 渲染表格行的方法
  renderRow(bookItem) {
    // 模板字符串不需要写onclick属性
    let tableRow = `<tr>
                      <th scope="row">
                        <button class="btn-remove">Delete</button>
                      </th>
                      <td>${bookItem.lBookName}</td>
                      <td>${bookItem.lBookAuthor}</td>
                      <td>${bookItem.lBookType}</td>
                    </tr>`;
    tableBody.innerHTML += tableRow;
  }

  removeBook(trElement) {
    trElement.remove()
    console.log("Hello")
  }
}

解决方案2：单独创建DOM元素绑定事件 #

如果你不想用事件委托，可以不用innerHTML拼接字符串，改为手动创建DOM节点后绑定点击事件，注意要处理this指向问题：

class DisplayBook {
  renderRow(bookItem) {
    const tr = document.createElement('tr')
    tr.innerHTML = `<th scope="row">
                      <button class="btn-remove">Delete</button>
                    </th>
                    <td>${bookItem.lBookName}</td>
                    <td>${bookItem.lBookAuthor}</td>
                    <td>${bookItem.lBookType}</td>`
    // 拿到当前行的删除按钮，绑定点击事件
    const removeBtn = tr.querySelector('.btn-remove')
    removeBtn.addEventListener('click', () => {
      // 箭头函数继承外部this指向类实例，可以直接调用removeBook
      this.removeBook(tr)
    })
    tableBody.appendChild(tr)
  }

  removeBook(trElement) {
    trElement.remove()
    console.log("Hello")
  }
}

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