Question

是否可以在字符串文字中使用onclick？

我的page视图如下：

const page = () => {
  const htmlOutput = `
    <button
      onclick="openMessageComposer"
      id="messageCta">Message</button> // Using the id works
  `;
  document.getElementById('app').innerHTML += htmlOutput;
  document.getElementById('messageCta').onclick = () => {
    console.log("openMessageComposer")
  }
}

export default page;

它正在像这样的路由器中使用：

import page from './page.js';

window.onload = () => {
  page()
}

作为我的index.html文件导入到我的<script type="module" src="router.js"></script>文件中

这有效。

但是，我想避免使用document.getElementById('messageCta').onclick。有没有办法使用onclick事件？

类似

const openMessageComposer = () => {
  console.log("openMessageComposer")
}

将存在于page组件中。

Answer 1

您当前有两次onclicks：一个inline属性，它试图引用名为openMessageComposer的全局变量，但是对此不执行任何操作。（另一个是您的.onclick）如果要删除.onclick，则只需确保内联处理程序调用 openMessageComposer函数即可：

onclick="openMessageComposer()"

但是内联属性通常被认为是相当差的做法，并且会使脚本更加难以管理，尤其是在较大的代码库中-我更喜欢您当前分配给onclick 属性的方法。

如果需要将id添加到您不喜欢的附加元素上，请改为使用createElement显式创建该元素，因此您可以直接引用它，而无需给出它是id，并分配给它的onclick属性：

const page = () => {
  const button = document.createElement('button');
  button.textContent = 'Message';
  button.onclick = openMessageComposer;
  document.getElementById('app').appendChild(button);
};

如何在JavaScript字符串文字中使用`onclick`

1 个答案: