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

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()
}

它作為<script type="module" src="router.js"></script>作為模塊導入到我的index.html文件中

這可行。

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

就像是

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

它會存在於page組件內部。

Answer 1

當前，您有兩次onclicks：一次，在inline屬性中，它嘗試引用名為openMessageComposer的全局變量，但是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);
};