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

Question

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

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

parent.appendChild(image);

这一切都很好。但是，我想用 onclick 方法保存（通过 PHP 脚本）生成的 HTML 。我试过使用 parent.innerHTML，但是当它返回图像时，onclick 不存在。

我越来越：

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

当我想要的是类似的东西时：

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

有人可以帮我弄清楚如何实现这一目标吗？谢谢。

score 2 · Accepted Answer

那是不可能的。一个活函数实例不能以其所有范围环境和其他内部或公共属性进行序列化。你只能得到它的代码，做类似的事情

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

score 1 · Accepted Answer

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

如果您将 onclick 函数直接写入 HTML，然后将其提取出来，那么这将起作用。

2 回答 2