向模板添加 onclick 事件

Question

我遇到了一个问题，无法向我的元素添加 onclick 事件。如果我这样调用它：

<td onclick="${console.log('bam')}">X</td>

事件是立即调用的，因此我认为如果像这样操作：

<td onclick="${() => console.log('bam')}">X</td>

点击后可以工作，但是使用这样的代码会导致它完全停止工作。有人知道如何修复吗？哦，我希望能够在没有 jQuery 的情况下实现。

this.device.error_log.map((el, i) => {
            if (el.message.component == "displays") {
                return (result += `
            <tr error_id="${i}">
             <td>
                ${this.device.error_log[i].message.component}
             </td>
             <td>
                ${this.device.error_log[i].message.info}
             </td>
             <button onclick="${() => console.log('bam)}">
                X
             </button>
            </tr>`);
            }
        });
    this.error_table.innerHTML += result

- Jacki

Answer 1

一般的想法是在函数内创建元素，将事件处理程序分配给它们，然后将它们附加到表格中：

this.device.error_log.forEach((el, i) => {
  if (el.message.component == "displays") {
    const tr = document.createElement('tr');
    tr.setAttribute('error_id', i);
    tr.innerHTML = `
             <td>
                ${this.device.error_log[i].message.component}
             </td>
             <td>
                ${this.device.error_log[i].message.info}
             </td>
             <button>
                X
             </button>`;
    tr.querySelector('button').onclick = () => this.bam();
    this.error_table.appendChild(tr);
  }
});

请注意，只有在需要创建新数组时才应使用.map。在这里，您想要执行副作用（更改DOM），因此应改用.forEach。

虽然可以改变使用内联处理程序的方式，但通常认为内联处理程序是相当糟糕的做法 - 它们会导致脆弱的代码，需要全局污染，具有字符串转义问题，具有作用域问题，并且具有奇怪的with机制，等等。最好显式地附加侦听器。

- CertainPerformance

Answer 2

你可以简单地这样做：

<table>
  <tr>
    <td onClick="javascript: console.log('test')">test</td>
  </tr>
</table>

或者像这样：

<table>
  <tr>
    <td onclick=`${console.log('test')}`>test</td> <!––  Notice the backtick -->
  </tr>
</table>

或者，更简单地说：

 <table>
   <tr>
     <td onClick="console.log('test')">test</td>
   </tr>
 </table>

- Mosè Raguzzini

---

你能解释一下为什么要使用"javascript:console.log('test')"吗？简单的onClick="console.log('test')"也可以实现相同的功能。 - prasanth

我正在列出与 OP 问题类似的所有方法，javascript: console.log() 也可以使用，所以我必须将其列出。 - Mosè Raguzzini