JavaScript修改输入框值时如何触发已绑定的change事件

浏览器原生的change事件仅会在用户通过交互操作（比如键盘输入后失焦、下拉选择等）修改表单值时自动触发。通过JavaScript直接修改DOM的value属性属于程序式赋值，浏览器不会自动触发对应的事件，因此绑定在父级div上的监听函数不会执行。

DOM结构 #

<div id="MyDiv">
  <input value="" id="MyElement" type="text">
</div>

原有事件绑定代码 #

document.getElementById("MyDiv").addEventListener('change', function (event) {
  alert(event)
  var elem = event.target;
});

原有JS修改值代码 #

function test_1() {
  tmp = document.getElementById("MyElement")
  tmp.value = "new value"
}

在完成value赋值后，手动构造change事件并派发到绑定了监听的元素上即可触发对应逻辑，修改后的代码如下：

function test_1() {
  tmp = document.getElementById("MyElement")
  tmp.value = "new value"
  // 手动派发change事件
  document.getElementById("MyDiv").dispatchEvent(new Event("change"));
}

优化补充 #

如果你需要事件对象的target属性指向实际被修改的input元素，可以将事件派发到input节点并开启冒泡，父级div的监听同样能生效：

document.getElementById("MyElement").dispatchEvent(new Event("change", {
  bubbles: true, // 开启事件冒泡
  cancelable: true // 允许事件被取消
}))

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