如何在尚未在 DOM [no-jQuery] 中的元素上添加事件侦听器？

您可以将 HTML 字符串解析为documentJS 中的 a，然后将事件侦听器添加到该元素。

所以你有你的模板文字字符串。

const messageFormatted = messageText => {
  return `
  <li class="message-item">
    <img class="message-avatar" src="./icons/boy.png" alt="Username">
      <article class="message-content">
        <p class="author">Ernesto Campese</p>
        <p class="message">${messageText}</p>
        <p class="datetime">A moment ago</p>
      </article>
      <div class="message-actions">
        <img id="message-edit" class="action-button" src="./icons/edit.png" alt="" width="22" height="22">
        <img id="message-delete" class="action-button" src="./icons/delete.png" alt="" width="22" height="22">
      </div>
  </li>
  `;
}

您可以string通过编写如下所示的函数将您的内容转换为 HTML。它使用DOMParser API来创建一个新的document，它将包含您在string.

const parseStringToHTML = (str) => {
  const parser = new DOMParser();
  return parser.parseFromString(str, 'text/html');
};

并且这个文档就像你在你的页面中拥有的一样，它只是一个新的，暂时只存在于你的 JS 内存中。提供您的stringas 参数parseStringToHTML以创建 HTML。

const message = messageFormatted('This is the message'); // Example message
const messageHTML = parseStringToHTML(message); // Returns a document object with all the features a document object has.

所以，现在你string是一个document你可以使用的方法就可以了像getElementById，querySelector等，但首先你必须选择你所需要的元素。

const messageDeleteButton = messageHTML.querySelector("#message-delete");

看到我使用了messageHTML而不是document. 在这种情况下messageHTML 是a document，因此我们可以在其中查询。现在你已经在里面找到了你的元素，document你可以向它添加一个事件监听器。

messageDeleteButton.addEventListener("click", (e) => {
    e.parentNode.parentNode.remove();
});

好的，现在已经添加了事件侦听器。您现在要做的就是将您需要的 HTML 从 附加messageHTML到document您的页面中。HTML 可以在messageHTML.body属性中找到。

现在代替insertAdjacentHTML用于insertAdjacentElement在您选择的位置插入元素。要附加的元素是<li class="message-item">这将是firstElementChild在body中的messageHTML.body财产。

因此，在submit表单的事件侦听器中，将以下行更改为：

messageList.insertAdjacentHTML("beforeend", messageFormatted(messageTextarea.value));

对于我在上面解释的所有内容。

// Create string
const message = messageFormatted(messageTextarea.value);

// String to document
const messageHTML = parseStringToHTML(message);

// Select delete element.
const messageDeleteButton = messageHTML.querySelector("#message-delete");

// Add event listener to delete element.
messageDeleteButton.addEventListener("click", (e) => {   
    e.parentNode.parentNode.remove();
});

// Append the <li> element to the messageList.
messageList.insertAdjacentElement("beforeend", messageHTML.body.firstElementChild); 

不要忘记parseStringToHTML在代码中包含该函数。我知道这是很多工作，所以如果你有任何问题，请提出。

我希望这会帮助你。

请注意，我看到事件委托（全局事件侦听器）不是您想要做的事情，尽管正如其他人所说，它比其他方法（甚至是我自己的答案）更高效且更易于实现。它还可以解决侦听您已添加或什至从列表中删除的元素的问题。您甚至可以在TJ Crowder 建议的<ul id="message-list">元素上设置它。