设置 html 后添加事件的正确方法

Question

假设我有一个元素，我想写 html，例如：

const tr = ...;
tr.innerHTML = `<td>...</td>`;

有没有办法编写 html 以便我已经有一个事件侦听器，或者我是否需要使用新的选择器并向其添加事件侦听器，例如：

tr.querySelector('td').addEventListeneer('click', myFunction);

或者这通常是如何完成的？

Answer 1

您可以编写一个将模板字符串作为输入的函数：

const dom = innerString => {
    const holder = document.createElement("DIV");
    holder.innerHTML = innerString;
    return holder.children;
};

然后用

调用它

const elements = dom("<tr><td>…</td></tr>");

现在您可以使用

将事件侦听器附加到第一个元素

elements[0].children[0].addEventListener(…);

然后将元素数组附加到文档

Answer 2

您可以按照您的建议进行操作，方法是插入 HTML 然后添加一个事件侦听器。

或者，您可以使用 createElement 文档方法在 DOM 之外创建元素，附加您的事件侦听器和任何其他属性，然后将其作为一个整体插入。

第二种方式在性能和安全方面都有好处，但这在很大程度上取决于用例，所以如果这对您很重要，请随时进一步探索。

Proper way to add an event after setting html