javascript - onclick 函数未在创建的 DOM 元素的 externalHTML 中注册

Question

我想知道为什么当我使用outerHTML 按钮时，由createElement("button") 创建的按钮的onclick 函数没有被注册和触发。我的意思是，像标题这样的普通属性确实会被附加，但函数不会。

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，请在将其写入文档后附加事件。