Свойство DOM, чтобы указать, был ли обновлен элемент

Question

Я использую ' contenteditable = true ', чтобы включить редактирование определенных ячеек таблицы.Теперь я хочу знать, какие из редактируемых элементов на странице действительно были отредактированы пользователем, чтобы я мог обработать изменения.

Хотя я мог бы, вероятно, использовать слушатели событий для этой цели, этот подход будет утомительным в моем случае.Страница генерируется динамически и содержит переменное количество редактируемых элементов.Я хочу избежать необходимости динамически добавлять прослушиватели событий для каждого редактируемого элемента.

Я хочу знать, есть ли в DOM свойство / флаг, указывающий, был ли обновлен элемент.Если это так, я бы хотел найти решение по этому вопросу:

var element_123 = document.getElementById("element_id_123");
 var was_edited = element_123.was_edited;

Спасибо.

Answer 1

Я попробовал несколько решений, лучшее, что я нашел, было написано conradgray в блоге coderwall.com: https://coderwall.com/p/lxl3zw. Я решил добавить содержимое статьи в пост,если в какой-то момент оригинал больше не существует.

Это его решение:

var editable = document.getElementById('text');
editable.addEventListener('input', function() {
    console.log('Hey, somebody changed something in my text!');
});

<div id="text" contenteditable>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at arcu ac dui eleifend suscipit a ut est. Ut iaculis ut massa non accumsan. Quisque hendrerit nisl at egestas cursus.
</div>

Answer 2

Что вам нужно сделать, это установить contenteditable только для конечных элементов и текстовых узлов, а затем прослушать событие input.Таким образом, вы можете извлечь точный источник события.

document.body.addEventListener('keydown', event => {
  console.log(event.target);
});

function addContentEditable(el) {
  if (el.children.length === 0) { el.setAttribute('contenteditable', true) }
  if (el.nodeType === 3) { el.setAttribute('contenteditable', true) }
  [...el.children].forEach(c => {
    addContentEditable(c);
  });
}

addContentEditable(document.body);

<div class="pad">
  <p>Some text</p>
  <p>Some more text<a> and a link</a></p>
  <p>Even <b>more</b> text</p>
</div>

Answer 3

Я не думаю, что что-то подобное встроено в браузер.Тем не менее, вы можете использовать что-то вроде этого (http://api.jquery.com/delegate/):

$( "#didichange_tbl" ).delegate( "input", "change", function() {
  console.log("table has changed!!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <table id="didichange_tbl">
        <tr>
          <td><input/></td>
        </tr>
        <tr>
          <td><input/></td>
        </tr>
 </table>