[jQuery]spanタグのテキストが変更された場合にイベントを発火させたいです。

Question

前提・実現したいこと

<span class="change_span">ここが変更</span>
上記の「ここが変更」の部分が変わった際にイベントを発火させたいのですが、どのような方法がありますでしょうか？
以下ではイベントの発火をすることが出来ませんでした。
ご教授頂けると幸いです。
$('.change_span').change(function (){

}

発生している問題・エラーメッセージ

イベントが発火しない

該当のソースコード

$('.change_span').change(function (){

}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

change()はフォームコントロールでしか使えません。
MutationObserverでsubtreeオプションとcharacterDataオプションとchildListオプションを利用することで可能です。

Comments

[tanakamaro]

ありがとうございます！
試してみたのですが
observer.observe(target, {
characterData: true
})の部分で
Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
at (index):260
(anonymous) @ (index):260
のエラーが表示されます。。

[int32_t]

target がspan要素になってないのでしょう。$('.change_span')[0] など試してみてください。

[hope_mucci]

int32_tさん

MutationObserverでオプションを{subtree: true, characterData: true}指定してobserveしてみましたがspan要素のテキストの変更に反応しません。
{childList: true} の設定であればテキストの変更でも反応しました。
{subtree: true, characterData: true}が有効になる場合はどんなケースがあるのでしょう？

[int32_t]

あ、childListも必要ですね。ご指摘ありがとうございます。
subtreeとcharacterDataだけだと、Textノードの値が変更されたときだけ反応します。Textノードが入れ替えられたときは反応しません。

[tanakamaro]

ありがとうございます！
無事実装することが出来ました！
助かりました。

Answer 2

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const mo = new MutationObserver(r=>{
    console.log(r[0].removedNodes[0].nodeValue);
    console.log(r[0].addedNodes[0].nodeValue);
  });
  const target=document.querySelector('span');
  const opt = {
  childList:true,
  characterData:true,
  characterDataOldValue:true,
  };
  mo.observe(target, opt);
  target.textContent="bbb";
});
</script>
<span>aaa</span>