設置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 之外創建元素，附加您的事件偵聽器和任何其他屬性，然后將其作為一個整體插入。

第二種方式這樣做有性能和安全方面的好處，但這在很大程度上取決於用例，所以如果這對您很重要，請隨時進一步探索。