JavascriptでinputタグのChangeイベントでvalueが変更されたときのイベントがとりたいです。

Question

下記コードで、id = testのinputタグがJavascript上でvalueが変更された場合にイベントを走らせたいのですが、
ユーザーが直接入力した場合かフォーカスが離れる場合でないとchange, inputイベントが実行されないです。
Javascript上でvalueの変更イベントを取る方法はありますでしょうか？

<input type="text" id="test" />

let test= document.getElementById('test')

test.addEventListener('input', (value) => {
    testが変更されたときの処理
})

test.value = "test2"

Answer 1

無理やりやればこんな感じ

<input type="text" id="test" value="test1" />
<script>
const test= document.getElementById('test');
let value=test.getAttribute('value');
test.addEventListener('input', () => {
  console.log("testが変更されたときの処理");
});
Object.defineProperty(test, "value", {
get: () => value,
set: newValue => {
  const oldValue = value;
  value = newValue;
  test.dispatchEvent(new Event('input'));
  console.log(`${oldValue}→${value}`);
}
});
test.value="test2";
test.value="test3";
</script>

調整版

<input type="text" id="test" value="test1" />
<script>
const test= document.getElementById('test');
let value=test.getAttribute('value');
test.addEventListener('input', () => {
  console.log("testが変更されたときの処理");
});
Object.defineProperty(test, "value", {
get: () => value,
set: newValue => {
  const oldValue = value;
  value = newValue;
  test.dispatchEvent(new Event('input'));
  test.setAttribute('value',newValue);
  console.log(`${oldValue}→${value}`);
},
});
let count=1;
let timerId=setInterval(()=>{
  test.value=`test${++count}`;
  if(count>5) clearInterval(timerId);
},1000);
</script>

Comments

[yambejp]

でもこれだとinputのvalueの変化が反映されないですね・・・
調整しましたがこれもいまいち・・・

Answer 2

Javascript上でvalueの変更イベントを取る方法はありますでしょうか？

ありません。

test.value = "test2"
testが変更されたときの処理

のように value プロパティ更新後に処理を書くか、

test.value = "test2"
test.dispatchEvent(new Event('input'));

イベントを発行してイベントリスナを起動してください。