假設獲取一個 DOM 作為參考節點，然后創建并插入一個 DOM 作為新節點。
如果我盡快創建并插入新節點，DOMContentLoaded 是上述情況下的最佳事件選項嗎？
參考節點不是影像，它是 HTMLnknowElement，例如 HTMLDivElement、HTMLSpanElement。
這是一個示例代碼流。
window.addEventListener("DOMContentLoaded", (event) => {
// Below is an example code as pseudo code.
// Get a reference DOM.
const referenceEl = document.querySelector(".foo .reference-dom");
// Create a new DOM.
const newEl = document.createElement(htmlTag);
// Insert the new DOM before reference DOM.
referenceEl.parentElement.insertBefore(newEl, referenceEl.nextElementSibling)
})
如果我盡快執行代碼，在上述情況下，DOMContentLoaded 是不是最好的事件選項？
uj5u.com熱心網友回復：
如果您希望代碼盡快運行，考慮到它所依賴的元素已經存在于 DOM 中，最簡單的方法是將您的<script>標簽放在腳本運行所需的最終元素下方。例如，對于.reference-dom，您可能會這樣做
<div class="reference-dom">
...
</div>
<script>
const referenceEl = document.querySelector(".foo .reference-dom");
// or
const referenceEl = document.currentScript.previousElementSibling;
// ... etc
如果這不是一個選項，您可以使用的另一種方法是提前將子樹MutationObserver添加到檔案中（例如在 , 的開頭<body>并觀察addedNodes您正在尋找的節點是否出現 - 但是那是昂貴的，矯枉過正的，而且更難管理。
對于非常大的頁面（例如），等待 DOMContentLoaded 確實可能需要很長時間，在這種情況下，您正在做的是一個好主意 - 在該事件觸發之前向應用程式添加基本功能，以確保良好的用戶體驗。（不過，如果您正在做的只是向 HTML 添加另一個標簽，更好的方法是使用模板引擎或服務器端的東西，以便它自己提供完整的 HTML，而不必更改它的客戶端-稍后通過 JavaScript）
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/427029.html
標籤：javascript dom 事件处理 dom 事件 添加事件监听器