javascript - 获取动态生成的 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

这实际上是不可能的。事件函数实例不能通过其所有作用域环境和其他内部或公共(public)属性进行序列化。你只能得到它的代码，做类似的事情

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