onclick函数未在创建的DOM元素的outerHTML中注册

Question

我想知道为什么当我使用按钮outerHTML时，createElement（＆＃34; button＆＃34;）创建的按钮的onclick函数没有被注册和触发。我的意思是，像Title这样的普通属性会附加，但函数不会。

function createBtn(answer){
    var btn = document.createElement("button");
    var btnTxt = document.createTextNode("Are we twins?");
    btn.appendChild(btnTxt);

    btn.onclick = function(){
        alert(answer);
    }
    btn.title = "This is the title";

    document.write(btn.outerHTML); // onclick is not registered
    document.body.appendChild(btn); // onclick is registered

}

createBtn("Not quite");

Answer 1

HTML节点的outerHTML属性返回String。事件将附加到HTML节点，但当您将它们转换为Stings时，链接到它们的所有事件都将丢失。因此，当您将document.write与btn.outerHTML一起使用时，它会将按钮复制为文本，并且所有附加的事件都将丢失。

但是当您将appendChild与btn对象一起使用时，它会附加HTMLButtonElement对象以及附加到它的事件。

因此，如果您必须使用outerHTML，请在将事件写入文档后附加事件。