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");
答
HTML节点的outerHTML属性返回String
。这些事件将附加到HTML节点,但是当您将它们转换为Stings时,所有链接到它们的事件都将丢失。因此,当您使用document.write
与btn.outerHTML
时,它会将该按钮复制为文本,并且所有附加的事件都将丢失。
但是,当您使用appendChild
和btn
对象时,它会附加HTMLButtonElement对象并附加事件。
因此,如果您必须使用outerHTML
,请在将事件写入文档后附加事件。
是不是所有的属性都像.title,.style和.onclick所有的对象值? –
这是因为事件属性和事件属性的区别。当你说btn.onclick它添加一个事件处理程序属性。事件属性在DOM对象中可用,但不在HTML本身中。您可以使用btn.setAttribute()方法将'onclick'设置为事件属性而不是事件属性(这是不鼓励的)。对于标题,样式属性和属性是相同的。所以当你将它们添加为属性时,它也会更新属性。请参阅[jsfiddle](https://jsfiddle.net/c9hvpmsa/1/) –
非常清晰,尤其是您的第二条评论。谢谢! –