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

Question

[Акваланг]

У меня есть div-блок, стилизованный под поле ввода.
Когда юзер туда что-то вводит, мне надо это перехватывать, как oninput и обрабатывать в режиме реального времени.

Я сделал такую штуку, и она работает.

/* Перепечатываем текст в превью */
$('.KEmoji_Input>div').bind("DOMSubtreeModified",function(){
	alert();
});

Но отладчик Фаерфокса пишет это:
«Применение Mutation Events является устаревшим. Вместо них используйте MutationObserver.»

Поскольку, в JS я так себе, начал гуглить готовые простые примеры про MutationObserver, но чет там какие-то классы, еще куча всяких штук, что мне понять сложновато.

Можете подсказать, куда копать или готовое решение?

Answer 1

[Stalker_RED]

MutationObserver

Да, там классы и куча штук, но выбора особо нет.

Существуют библиотеки-обертки, типа таких, но не сказал бы, что с ними разобраться намного легче, чем с ванильным обсервером. (хотя использовать немного удобнее)

Answer 2

[Павел Корнилов]

Вот - подготовил список возможных событий, происходящих при вводе в div. Возможно, что-то из них подойдёт. Лог - для наглядности.

https://codepen.io/KorniloFF/pen/ZwQPgE

P.S.
Как можно обратить внимание, при обычном вводе - прекрасно отлавливается событие input.

Так что, для вашего случая подошло бы:

$('.KEmoji_Input>div').on("input",function(){
  alert(111);
});

или

$('.KEmoji_Input>div').on("DOMCharacterDataModified",function(){
  alert(222);
});