Как отследить изменение текста внутри элемента?

Question

Имеется такой код, текст которого меняется динамически:

<ul id="color-values">
    <li><label>HEX:</label><span id="hex">#FF0000</span></li>
</ul>

Как мне отследить событие с помощью javascript, которое вызывается когда содержимое текста меняется?

Answer 1

Вот так )

const hex = document.getElementById('hex');

hex.addEventListener('DOMSubtreeModified', () => {
  console.log('change');
})

function changeColor() {
  hex.textContent = '#' + Math.floor(Math.random() * 16777215).toString(16);
}

#hex {
  text-transform: uppercase;
}

<ul id="color-values">
  <li><label>HEX:</label><span id="hex">#FF0000</span></li>
</ul>

<button onclick="changeColor()">Change</button>

Answer 2

Да, можно для отслеживания использовать MutationObserver, DOMSubtreeModified. Но зачем вообще отслеживать? Не проще ли событие по изменению содержимого повесить на то же самое событие, которое и вызывает это изменение? Т. е., другими словами, переписать функцию changeColor() таким образом:

function changeColor() {
  hex.textContent = '#' + Math.floor(Math.random() * 16777215).toString(16);
  console.log('change');
}

И без лишней заморочки.

Ещё не забываем, что toString(16) не приводит к корректному переводу из десятичной в шестнадцатеричную системы для задавания цвета, так как если код составляющей цвета получается меньшим, чем hex 10, то нужно впереди дописывать "0".

БЛОГ НА HUSL

Как отследить изменение текста внутри элемента?

Ответы (2 шт):