Как сохранить элемент html, включая его прослушиватели событий?

Использование элемента html и addEventListener имеет несколько преимуществ по сравнению с использованием встроенных событий, таких как onclick.

Однако сохранить элемент, включая его встроенное событие, очень просто, например, встраивая его в родительский элемент и сохраняя родительский элемент innerHTML.

Можно ли сделать что-то подобное при использовании прослушивателей событий?

Изменить:

Я понял, что мой вопрос недостаточно объяснен. Итак, некоторые дополнения.

Под «хранением» я подразумеваю способ получить информацию, содержащую элемент и прослушиватель событий.

Аналог со встроенными событиями прост: просто встроить в родительский элемент и сохранить innerHTML (строку) родителя где-нибудь, например в базе данных, а позже пересоздать элемент, загрузив строку и применив ее к innerHTML какого-то элемента.

Но как сделать аналог с элементами при использовании слушателей событий? Нельзя просто использовать innerHTML, так как тогда события не сохраняются.

Надеюсь, это немного прояснит мой вопрос.

Изменить 2

С помощью комментариев я предпринял несколько неудачных попыток.

Можно получить информацию о element, используя createDocumentFragment() или element.cloneNode(true).

Однако первый способ не работает для внешнего хранилища, так как, если я правильно понял, будет содержать только указатель. Вот пример:

https://jsfiddle.net/hcpfv5Lu/

Второй способ тоже не работает. Я не совсем уверен, почему, но если я JSON.stringify клон "исчезает". Вот пример:

https://jsfiddle.net/3af001tq/


javascript event-listener html
person Daniel    schedule 05.01.2017    source источник
comment
Что вы имеете в виду под магазином?   -  person KevBot    schedule 05.01.2017
comment
@KevBot Я имею в виду способ получить информацию, поместить ее в другое место и снова загрузить позже. Например, можно сохранить innerHTML (строку) одного элемента и повторно применить ее позже к другому элементу, чтобы восстановить прежний элемент.   -  person Daniel    schedule 05.01.2017
comment
я что-то упускаю? addEventListener - это javascript, а не html   -  person Cruiser    schedule 05.01.2017
comment
Вы можете создавать элементы с помощью Document.createElement()doc и прикреплять событие прослушиватели созданного объекта. Затем вы можете вставить этот объект в родителя с помощью parent.appendChild(obj)doc. Затем вы можете хранить объекты в JavaScript.   -  person E. Sundin    schedule 05.01.2017
comment
http://stackoverflow.com/a/6348597/3877877 ... возможно, я неправильно понял, но вы можете сделать это так же.   -  person Martin E    schedule 05.01.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать фрагмент документа для хранения узла DOM в переменной JavaScript, которую затем при необходимости можно добавить к элементу DOM.

https://developer.mozilla.org/en/docs/Web/API/Document/createDocumentFragment

person MrBizle    schedule 05.01.2017
comment
Спасибо. Похоже, это может сработать. К сожалению, мне не удалось выяснить подробности: jsfiddle.net/hcpfv5Lu. Чтобы сохранить элемент, я использую JSON. В противном случае, я думаю, я получаю только указатель на элемент. Но когда я восстанавливаю его, javascript жалуется, что это не узел. - person Daniel; 05.01.2017
comment
Я думаю, что вы, возможно, лаете не по тому дереву, узел dom не может быть сохранен в формате json. Если вам нужно сохранить HTML в формате JSON, вам понадобится строка, затем вам нужно добавить эту строку к узлу, если он еще не существует, вам нужно будет создать его с помощью фрагмента документа или document.createElement - person MrBizle; 06.01.2017
comment
Спасибо. Я не уверен, что понял ваше предложение. Я хочу преобразовать элемент DOM (включая его прослушиватели событий, прикрепленные javascript) в строку, чтобы сохранить ее в базе данных. Я могу сохранить DOM, за исключением прослушивателей событий, с помощью string = JSON.stingify(element.innerHTML) и восстановить его с помощью element.inerHTML = JSON.parse(string). Но как мне сохранить слушателей событий? - person Daniel; 06.01.2017
comment
Вы не можете хранить узел dom в JSON, поэтому вам нужно будет записать в свой документ и привязать прослушиватели событий к узлу при создании, добавление их в первый экземпляр перед сохранением в JSON будет излишним. Это хорошее решение stackoverflow.com/questions/16113070/ - person MrBizle; 06.01.2017
comment
Жаль, что нельзя экспортировать узлы dom. Интересно, почему. Решение, на которое вы ссылаетесь, работает, только если я с самого начала знаю, какие узлы получают какие события. Но, похоже, это не удастся, если я этого не сделаю, например, если пользователь может их добавить. - person Daniel; 06.01.2017
comment
Да, узел и прикрепленные к нему прослушиватели событий по своей природе являются частью объектной модели документа. Что вы на самом деле пытаетесь сделать? Почему его нужно хранить в JSON и почему вы не знаете, какие события нужно прикреплять, когда он находится в DOM? - person MrBizle; 06.01.2017
comment
У меня есть скрипт, который создает svg с прикрепленными прослушивателями событий. Пользователь может сохранить информацию в базе данных и снова загрузить ее позже. Однако скрипту требуется довольно много времени для создания файла svg. Поэтому вместо того, чтобы сохранять ввод алгоритма и запускать его снова, я хотел бы сохранить вывод (svg). Следовательно, было бы неплохо сохранить его, включая прослушиватели событий. Я знаю, как хранить строки в базе данных, поэтому я хотел stringify вывести. Имеет ли это смысл? - person Daniel; 06.01.2017
comment
К сожалению, вы не сможете сохранить прослушиватели событий в строке, сохраните только ссылку на то, что они были. Не могли бы вы создать строку для SVG с серверным языком? в зависимости от того, что вы делаете, это может быть быстрее. - person MrBizle; 09.01.2017
comment
Спасибо. Я понимаю. Интересно, что, в конце концов, есть по крайней мере один хороший случай, когда встроенные события имеют преимущество. Хотя все еще немного удивительно, что нет метода по умолчанию для сохранения всего SVG, включая прикрепленные прослушиватели событий. - person Daniel; 10.01.2017
comment
Я еще не рассматривал вычисления на стороне сервера. SVG создается с помощью MathJax. Так что я думаю, мне придется потянуть и эту серверную сторону. Я мог бы изучить это. На данный момент я загружаю SVG и быстро показываю его без прикрепленных событий и позволяю вычислять событие SVG в фоновом режиме при отображении сообщения «Загрузка...» и заменяю его, как только это будет сделано. - person Daniel; 10.01.2017
comment
Я не уверен, что у встроенного будет какое-либо преимущество перед функцией, это было бы хуже в случае рендеринга на стороне сервера, например, если бы вы сохранили строку со ссылкой на все прослушиватели событий, это можно было бы сделать с очень небольшими объемами данных, обрабатываемых скрипт на странице. Удачи дружище! - person MrBizle; 10.01.2017

arrow_upward
-2
arrow_downward

Да.

Вы можете использовать что-то вроде.

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

затем в вашем файле javascript,

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

Это сохранит html-содержимое ul в var htmlMarkUp.

person relentless-coder    schedule 05.01.2017
comment
Спасибо. Но я имел в виду не способ хранения innerHTML через прослушиватель событий. Скорее я имел в виду способ хранения элемента, включая его прослушиватель событий. - person Daniel; 05.01.2017
comment
встроенный прослушиватель событий или во внешнем файле js? - person relentless-coder; 05.01.2017
comment
Не встроенные события. - person Daniel; 05.01.2017