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中獲得註冊

回答

相關問題