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

Getting the onclick method of a dynamically generated DOM element

本文关键字：元素 onclick 方法 DOM 获取 动态      更新时间：2023-09-26

我正在使用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()" />...

有人能告诉我如何实现这个吗?谢谢。

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

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

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

如果你把onclick函数直接写进HTML中，然后把它提取出来，那就可以了

相关文章：