如何存储 html 元素，包括其事件监听器？答案

【问题标题】：How to store html element including its event listeners?如何存储 html 元素，包括其事件监听器？
【发布时间】：2017-01-06 02:40:38
【问题描述】：

使用 html 元素的 addEventListener 与使用内联事件（如 onclick）相比有几个优势。

但是，存储包含其内联事件的元素很简单，例如，将其嵌入到父元素中并存储父元素的innerHTML。

在使用事件监听器时是否可以做类似的事情？

编辑：

我意识到我的问题没有得到充分的解释。所以这里有一些补充。

“存储”是指获取包含元素和事件监听器的信息的方法。

内联事件的模拟很简单：只需嵌入父元素并将父元素的innerHTML（字符串）保存在某处，例如在数据库中，稍后通过加载字符串并将其应用于innerHTML来重新创建元素一些元素。

但是当使用事件监听器时，如何对元素进行模拟呢？不能只使用innerHTML，因为那时事件不会被存储。

我希望这能澄清我的问题。

编辑 2

在cmets的帮助下，我做了一些不成功的尝试。

可以使用createDocumentFragment() 或element.cloneNode(true) 获取element 的存储信息。

但是，第一种方法不适用于外部存储，因为如果我理解正确，它将只包含一个指针。这是一个例子：

第二种方法也不起作用。我不完全确定为什么，但如果我 JSON.stringify 克隆它“消失”。这是一个例子：

【问题讨论】：

“商店”是什么意思？
@KevBot 我的意思是一种获取信息并将其放在其他地方并稍后再次加载的方法。例如，可以存储一个元素的innerHTML（字符串），稍后将其重新应用到其他元素，以恢复前一个元素。
我错过了什么吗？ addEventListener 是 javascript，而不是 html
您可以使用Document.createElement()doc 创建元素并将事件侦听器附加到创建的对象。然后您可以通过parent.appendChild(obj)doc 将此对象插入到“父对象”中。然后你可以在 JavaScript 中“存储”对象。
http://stackoverflow.com/a/6348597/3877877 ...也许我误解了，但你可以这样做。

【解决方案1】：

您可以使用文档片段将 DOM 节点存储在 JavaScript 变量中，然后可以在需要时将其附加到 DOM 元素。

【讨论】：

谢谢。听起来它可以工作。不幸的是，我无法弄清楚细节：jsfiddle.net/hcpfv5Lu。为了存储我使用JSON 的元素。否则，我认为我只会得到一个指向该元素的指针。但是当我恢复它时，javascript抱怨它不是节点。
我想你可能是在吠叫错误的树，一个 dom 节点不能以 json 格式存储。如果您需要以 JSON 格式存储 HTML，您将需要一个字符串，然后您需要将该字符串附加到一个节点，如果该字符串尚不存在，您将需要使用 doc frag 或 document.createElement创建它>
您不能在 JSON 中存储 dom 节点，因此您需要写入文档并在创建时将事件侦听器绑定到节点，在存储为 JSON 之前在第一个实例中添加它们将是多余的.这是一个很好的解决方案stackoverflow.com/questions/16113070/…
是的，一个节点和附加到它的事件监听器本质上是文档对象模型的一部分。你到底想做什么？为什么需要存储在 JSON 中，为什么在 DOM 中不知道需要附加哪些事件？
不幸的是，您将无法将事件侦听器保留在字符串中，只能存储对它们的引用。您可以使用服务器端语言为 SVG 创建字符串吗？取决于你在做什么，它可能会更快。

【解决方案2】：

是的。

你可以使用类似的东西。

<ul>
   <li id="list">Some data</li>
   <li>Dumy</li>
</ul>

然后在你的 javascript 文件中，

document.getElementById("list").addEventListener("click", function(){
     var htmlMarkUp = this.parentNode.innerHTML;
});

这会将ul的html内容存储在var htmlMarkUp中。

【讨论】：