时间戳

首页 > 解决方案 > 如何在javascript字符串文字中使用`onclick`

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

问题描述

是否可以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组件内部。

标签： javascriptmoduleonclickstring-literals

解决方案

您当前有两个 onclick：一个，在 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);
};

推荐阅读