JS修改input值时addEventListener绑定的change事件未触发

直接通过JavaScript修改input的value属性，不会触发元素绑定的change事件。
浏览器原生change事件的触发前提是用户手动交互修改表单值，且对应元素失去焦点，脚本直接修改DOM属性不属于用户原生交互，因此不会自动派发事件。

赋值完成后手动调用dispatchEvent派发change事件即可，修改testText函数：

function testFunction() {
  document.getElementById("testInput").addEventListener("change", () => {
    console.log("hi");
  });
}

function testText() {
  const input = document.getElementById("testInput");
  input.value = "Hello there";
  // 手动触发change事件
  input.dispatchEvent(new Event('change'));
}

testFunction();

页面HTML结构无需调整，点击按钮后即可正常在控制台看到hi输出：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="testText()" style="height: 20px"></button>
    <input id="testInput" />
    <script src="script.js"></script>
  </body>
</html>

• 如果使用事件委托把change事件绑定在父元素上，派发事件时需要开启冒泡配置：input.dispatchEvent(new Event('change', { bubbles: true }))
• 若要监听输入内容的实时变化，请绑定input事件，该事件同样不会在脚本修改value时自动触发，需要用相同方式手动派发。

内容的提问来源于stack exchange，提问作者user19373098