假設以下節點（實際上不是這樣生成的）：
let outer = document.createElement('div');
outer.innerHTML = `
<div>foo</div>
<div>bar</div>
.
.
.
<div>whatever</div>
`;
現在我可以追加outer到另一個節點：
let body = document.querySelector('body');
body.append(outer);
但是如何只附加內部outer而不丟失事件偵聽器等？
uj5u.com熱心網友回復：
通過使用語法傳播可迭代物件，將的append()每個子項outer作為單獨的引數呼叫。...
body.append(...outer.children);
uj5u.com熱心網友回復：
要回答您的“不丟失事件處理程式” - 事實證明您不是在追加時
無委托
let outer = document.createElement('div');
outer.classList.add("outer")
outer.innerHTML = `
<div onclick="console.log('Foo clicked')">foo</div>
<div >bar</div>
<div>whatever</div>
`;
let body = document.querySelector('body');
body.append(outer);
body.append(...outer.children);.outer { height:100px; width:100px; border: 1px solid red;}來自機構的委托
let outer = document.createElement('div');
outer.classList.add("outer")
outer.innerHTML = `
<div >foo</div>
<div >bar</div>
<div>whatever</div>
`;
let body = document.querySelector('body');
body.append(outer);
body.append(...outer.children);
body.addEventListener("click", e => {
const tgt = e.target;
if (tgt.matches(".foo")) console.log("Foo clicked")
else if (tgt.matches(".bar")) console.log("Bar clicked")
}).outer { height:100px; width:100px; border: 1px solid red;}轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/495074.html
標籤：javascript html