获取动态生成的DOM元素的onclick方法

Question

我正在使用onclick方法将图像动态添加到我的页面，如下所示：

var image = document.createElement("img");
image.src = "image.png";
image.onclick = function(){
    doSomething();
}

parent.appendChild(image);

一切正常。但是，我认为想要（通过PHP脚本）保存生成的HTML，使用onclick方法。我尝试过使用parent.innerHTML，但是当它返回图像时，onclick就不存在了。

我得到了：

...<img src="image.png" />...

当我想要的东西是：

...<img src="image.png" onclick="doSomething()" />...

有人可以帮我解决如何实现这个目标吗？感谢。

Answer 1

这是不可能的。生活函数实例不能与其所有范围环境和其他内部或公共属性进行序列化。你只能得到它的代码，做像

这样的事情

image.setAttribute(
  "onclick",
  image.onclick.toString().replace(/^function\s*([^)]*)\s*\{?|\}$|\n/g, "")
);
return image.outerHTML;

Answer 2

如果您在<script>标记或外部文件中的元素属性之外编写脚本，则它将永远不会在HTML中复制。据我所知，你所寻找的东西是不可能的。

如果你将onclick函数直接编写到HTML中，然后将其解压缩，那么就可以了。