onclick函数没有在创建的DOM元素的outerHTML中获得注册

我想知道为什么createElement（“button”）创建的按钮的onclick函数在我使用按钮outerHTML时没有被注册和触发。我的意思是，像Title这样的常规属性会被附加，但该功能不会。onclick函数没有在创建的DOM元素的outerHTML中获得注册

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");

来源

2017-07-06 Terje Rudi

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

但是，当您使用appendChild和btn对象时，它会附加HTMLButtonElement对象并附加事件。

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

来源

2017-07-06 09:33:27

是不是所有的属性都像.title，.style和.onclick所有的对象值？ –

这是因为事件属性和事件属性的区别。当你说btn.onclick它添加一个事件处理程序属性。事件属性在DOM对象中可用，但不在HTML本身中。您可以使用btn.setAttribute（）方法将'onclick'设置为事件属性而不是事件属性（这是不鼓励的）。对于标题，样式属性和属性是相同的。所以当你将它们添加为属性时，它也会更新属性。请参阅[jsfiddle]（https://jsfiddle.net/c9hvpmsa/1/） –

非常清晰，尤其是您的第二条评论。谢谢！ –

onclick函数没有在创建的DOM元素的outerHTML中获得注册

回答

相关问题